Người Viết : ViKiMi Editor

Xây dựng một Website tương thích thật đơn giản khi bạn sử dụng thành phần cơ bản của HTML
Một Website có khả năng tương thích cao đó là một Website có thể hiển thị đẹp mắt trên tất cả các trình duyệt và các thiết bị khác nhau. Vấn đề muôn thuở này được gọi là Tính tương thích của Website. Nó không khó khăn nhưng cũng là một vấn đề mà bạn cần nắm bắt khi thiết kế một Website. Làm cho Website luôn đẹp mắt trên mọi chuẩn thiết bị thật tốt.
Vậy nắm bắt vấn đề này có là một bắt buộc ?
+ Chắc chắn bạn cần biết điều này dù nó chỉ là một điều đã quá quen.
+ Ngày nay, việc giúp Website hiển thị trên mọi thiết bị đã được thiết kế quá chuẩn nhờ vào những Frameworks cung cấp sẵn có.
+ Bạn chỉ cần nắm bắt Frameworks và sử dụng cách thuần thục.
+ Nhưng cũng có thể là bạn sẽ tự thiết kế cho việc hiển thị tương thích trên các thiết bị dành cho Website của bạn. Điều này thật tốn công và được xem là ít hiệu quả. Nó làm bạn khá là rối khi phải làm mọi việc mà đáng lẽ các Frameworks đã làm cho bạn.
+ Tốt hơn hết là hiểu mọi vấn đề và chọn cách tối ưu hơn nhất
HTML Responsive Web Design / Thiết kế Website tương thích
Thiết kế web tương thích là việc tạo ra các trang web tốt nhất trên tất cả các thiết bị và người sử dụng luôn cảm thấy Website hiển thị chuẩn, không lỗi!
Website tương thích sẽ tự động điều chỉnh cho phù hợp với các kích thước màn hình và chế độ xem khác nhau. Do đó nó luôn đạt yêu cầu hiển thị và không bị lỗi sảy ra như là không xem được nội dung hoặc nội dung không hiển thị etc.
+ Thiết kế website tương thích là việc sử dụng HTML và CSS để tự động thay đổi kích thước, ẩn, thu nhỏ hoặc phóng to một trang web để làm cho trang web luôn hiển thị tốt trên tất cả các thiết bị (máy tính để bàn, máy tính bảng và điện thoại)
+ Đó là mục đích đạt được
CÁC BƯỚC CẦN LÀM :
Bước 1 : Setting The Viewport – Cài đặt khung nhìn
Để tạo một trang web tương thích :
+ Hãy thêm thẻ <meta name=”viewport”> vào tất cả các trang web của bạn
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2> Setting the Viewport – Thiết lập khung nhìn </h2> <p> Thiết lập này sẽ giúp Website có thể tương thích trên thiết bị hiển thị </p> </body> </html>
+ Cài đặt này sẽ đặt chế độ xem cho Website của bạn, đồng thời sẽ cung cấp hướng dẫn cho trình duyệt về cách kiểm soát kích thước và tỷ lệ của Website.
Bước 2 : Những phần chung
Chúng ta có thể quan tâm tới 2 phần chính đó tương thích hình ảnh và văn bản trên Website
A ] Tương thích hình ảnh – Responsive Images
Chúng ta cần giúp các hình ảnh có tỷ lệ phù hợp với mọi kích thước trình duyệt.
+ Cách đơn giản là : Sử dụng thuộc tính chiều rộng / width Property
Chúng ta sẽ để thuộc tính chiều rộng của hình ảnh có đơn vị theo %, điều này giúp hính ảnh hiển thị tốt nhất.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<img src="img_sea.png" style="width:100%;">
</body>
</html>
Hoặc chúng ta sử dụng thuộc tính max-width cho hình ảnh.
Sử dụng max-width được đặt thành 100%, khi đó hình ảnh sẽ giảm tỷ lệ nếu cần, nhưng không bao giờ tăng tỷ lệ lên lớn hơn kích thước ban đầu của hình ảnh.
<img src="img_sea.jpg" style="max-width:100%; height:auto;">
+ Hiển thị hình ảnh khác nhau tùy thuộc vào chiều rộng trình duyệt hoặc tuỳ thuộc trên thiết bị hiển thị
Sử dụng Phần tử HTML <picture> cho phép đạt được mục đích
<< Thay đổi kích thước cửa sổ trình duyệt để xem hình ảnh thay đổi >>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2> Hiển Thị các hình ảnh khác nhau dựa vào kích thước trình duyệt hoặc thiết bị hiển thị </h2>
<p> Hình Ảnh sẽ thay đổi theo các độ rộng màn hình </p>
<picture>
<source srcset="small.jpg" media="(max-width: 600px)">
<source srcset="medium.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_flowers.jpg" style="width:auto;">
</picture>
</body>
</html>
Chúng ta có thể thấy nguồn ( Source ) của Hình ảnh sẽ thay đổi dựa theo kích thước phương tiện ( Media ) hiển thị :
+ media=”(max-width: 600px)
+ media=”(max-width: 1500px)
+ Others
B ] Tương thích văn bản / Responsive Text
Để đạt được điều này thì văn bản nên sử dụng đơn vị “ vw ”
Kích thước văn bản có thể được đặt bằng đơn vị “vw”, có nghĩa là “ viewport width”.
+ Bằng cách này, kích thước văn bản sẽ tuân theo kích thước của cửa sổ trình duyệt. Và mục đích sẽ đạt được.
MỘT VÍ DỤ ĐIỂN HÌNH ::
<h1 style= “font-size: 10vw” > Hello World </h1>
Chúng ta thấy VW / Viewport là kích thước cửa sổ trình duyệt.
+ 1vw = 1% chiều rộng khung nhìn.
+ Nếu khung nhìn hiển thị có chiều rộng 100cm thì 1vw là 1cm.
Như vậy, chúng ta đã thiết lập được kích thước văn bản dựa vào độ rộng cửa sổ trình duyệt hoặc thiết bị hiển thị.
C ] Truy vấn phương tiện truyền thông / Media Queries
Chúng ta thấy việc hiển thị Hình Ảnh và Văn Bản tương thích thật tốt.
Tuy nhiên, đó cũng là nền tảng tốt để bạn lựa chọn các làm việc tối ưu là Truy vấn Phương Tiện truyền thông.
+ Sử dụng truy vấn Phương Tiện Truyền Thông giúp bạn đưa các thiết lập Kiểu CSS dành cho Website vào một khối quản lý khoa học và hiệu quả hơn.
+ Với truy vấn phương tiện, bạn có thể xác định các kiểu CSS phù hợp cho các kích thước trình duyệt khác nhau.
+ Công việc đơn giản là bạn hãy thiết lập CSS sao cho phù hợp
/* Use a media query */
@media screen and (max-width: 800px) { …. }
@media screen and (min-width: 1200px) { …. }
Etc .
Chúng ta sẽ tham khảo một trường hợp
Example :: Hiển Thị Tương Thích Trên Thiết Bị
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.left {
float: left;
width: 20%;
/* Độ rộng 20%, Mặc định */
}
.main {
float: left;
width: 60%;
/* Độ rộng 60%, Mặc định */
}
.right {
float: left;
width: 20%;
/* Độ rộng 20%, Mặc định */
}
/* Sử dụng media query để tại vị trí 800px */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%;
/* Độ rộng 100%, Khi độ rộng khung hiển thị nhỏ hơn 800px */
}
}
</style>
</head>
<body>
<h2> Media Queries </h2>
<p> Tương Thích dựa trên Độ Rộng Hiển Thị </p>
<div class="left">
<p>Left Menu</p>
</div>
<div class="main">
<p>Main Content</p>
</div>
<div class="right">
<p>Right Content</p>
</div>
</body>
</html>
Công việc thiết kế hiển thị Tương Thích trên các thiết bị không khó khăn. Trên đây là những kiến thức cơ bản mà bạn có thể vận dụng với HTML. Ngày nay, việc sử dụng các Frameworks đã quá quen thuộc nó giúp bạn tiết kiệm mọi thời gian công sức. Nếu bạn muốn thiết kế tương thích thiết bị thì nên sử dụng Framework phù hợp và đó là cách tốt nhất.
+ Thiết kế tương thích thiết bị không khó.