1.Thiết kế web tương thích là gì?
Thiết kế web tương thích là cách thức bạn xây dựng một trang web đáp ứng được trên mọi thiết bị và kích thước màn hình khác nhau. Bằng cách này, trải nghiệm của người dùng trên mỗi thiết bị khác nhau sẽ tăng rõ rệt
2. Các cách thiết kế web tương thích
2.1 Đặt chế độ xem
Đặt chế độ xem cho trang web của bạn sẽ cung cấp cho trình duyệt hướng dẫn về cách kiểm soát kích thước và tỷ lệ của trang để phù hợp với các thiết bị khác nhau
Để đặt chế độ xem ta sử dụng thẻ <meta>
Ví dụ:
<meta name="viewport" content="width=device-width, initial-scale=1">
Ở đây, tôi xác định chiều ngang là chiều ngang của thiết bị và quy mô ban đầu là 1
2.2 Hình ảnh đáp ứng
Hình ảnh đáp ứng là hình ảnh có tỉ lệ phù hợp với bất cứ màn hình nào
2.2.1 Sử dụng thuộc tính width
Nếu ta sử dụng thuộc tính CSS width với đơn vị là % hình ảnh sẽ phản hồi và tăng giảm tỷ lệ đúng với kích thước khung hình
Ví dụ:
Ở đây, tôi xác định chiều rộng của hình ảnh là 50% của màn hình
2.2.2 Sử dụng thuộc tính max-width
Nếu ta sử dụng thuộc tính max-width với đơn vị là % thì hình ảnh sẽ giảm tỉ lệ nếu khung hình thu nhỏ, và tăng tỷ lệ nếu khung hình phóng to nhưng không bao giờ tăng tỷ lệ để lớn hơn kích thước hình ảnh ban đầu
Ví dụ:
Ở đây, tôi dùng max-width để xác định chiều rộng cho hình ảnh
2.2.3 Hiển thị hình ảnh khác nhau tùy thuộc vào chiều rộng của trình duyệt
Thẻ <picture> trong HTML cho phép bạn xác định các hình ảnh khác nhau cho các kích thước khác nhau của cửa sổ trình duyệt
Ví dụ:
Ở đây, tôi xác định khi khung hình có kích thước là 600px hình ảnh hiển thị sẽ là đèn tắt còn khi khung hình có kích thước là 1500px hình ảnh hiển thị sẽ là đèn sáng
2.3 Văn bản đáp ứng
Kích thước của văn bản có thể được tính bằng đơn vị “vw” (1 vw= 1% chiều rộng khung hình)
Ví dụ:
Ở đây, tôi xác định văn bản hiển thị với kích thước là 5vw còn tiêu đề có kích thước là 10vw
2.4 Truy vẫn truyền thông
Ngoài việc thay đổi kích thước văn bản và hình ảnh, người ta cũng thường sử dụng các truy vấn phương tiện trong các trang web đáp ứng. Với các truy vấn phương tiện, bạn có thể xác định các kiểu hoàn toàn khác nhau cho các kích thước trình duyệt khác nhau.
Ví dụ:
Ở đây, tôi xác định khi chiều rộng của khung hình đạt 800px thì các khối sẽ hiển thị theo chiều ngang
