Thiết kế web đáp ứng HTML

Thiết kế Web đáp ứng là gì?

Responsive Web Design là về việc sử dụng HTML và CSS để tự động thay đổi kích thước, ẩn, thu nhỏ hoặc phóng to trang web, để làm cho nó trông đẹp 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):


Đặt Chế độ xem

Khi tạo các trang web phản hồi, hãy thêm <meta>yếu tố sau vào tất cả các trang web của bạn:

Thí dụ

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Điều này sẽ đặt chế độ xem của trang của bạn, sẽ cung cấp cho hướng dẫn trình duyệt về cách kiểm soát kích thước và tỷ lệ của trang.

Dưới đây là ví dụ về một trang web không có thẻ meta chế độ xem và cùng một trang web có thẻ meta chế độ xem:

Hình ảnh phản hồi

Hình ảnh phản hồi là hình ảnh có tỷ lệ độc đáo để phù hợp với mọi kích thước trình duyệt.

Sử dụng tài sản chiều rộng

Nếu thuộc tính CSS widthđược đặt thành 100%, hình ảnh sẽ phản hồi và tăng tỷ lệ lên xuống:
Lưu ý rằng trong ví dụ trên, hình ảnh có thể được thu nhỏ lại lớn hơn kích thước ban đầu của nó. Một giải pháp tốt hơn, trong nhiều trường hợp, sẽ là sử dụng max-widthtài sản thay thế.

Sử dụng thuộc tính chiều rộng tối đa

Nếu thuộc max-widthtính được đặt thành 100%, hình ảnh sẽ giảm tỷ lệ nếu phải, nhưng không bao giờ tăng tỷ lệ lớn hơn kích thước ban đầu của nó: