Trang web đáp ứng là trang web trông đẹp và tuyệt vời trên tất cả các thiết bị, tức là máy tính để bàn, máy tính bảng và điện thoại di động. Một trang web nên có thiết kế đáp ứng để làm cho nó đáp ứng. Tất cả chỉ xoay quanh việc sử dụng HTML và CSS để thay đổi kích thước, ẩn hoặc phóng to màn hình.
Hãy xem một ví dụ và ý nghĩa của phản hồi khi thay đổi kích thước trang web,
Máy tính để bàn
Thiết kế trang web trên Máy tính để bàn -
Máy tính bảng
Thiết kế trang web trông giống như thế này trên một máy tính bảng. Bạn có thể dễ dàng so sánh các thay đổi với ảnh chụp màn hình máy tính để bàn được hiển thị ở trên -
Di động
Thiết kế trang web trông giống như thế này trên Điện thoại di động -
Để phát triển một trang web đáp ứng, trông đẹp mắt bất kể kích thước thiết bị như thế nào, bạn cần thực hiện các khái niệm sau -
Chế độ xem
Chế độ xem được sử dụng để kiểm soát bố cục trên trình duyệt di động. Nó được sử dụng bên trong thẻ để cung cấp cho trình duyệt hướng dẫn về cách hoạt động để kiểm soát kích thước và tỷ lệ của trang web.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Đây,
width =device-width đặt chiều rộng của trang theo chiều rộng màn hình của thiết bị. Quy mô ban đầu =1.0 là đặt mức thu phóng ban đầu. Điều này hữu ích khi trang được tải bởi trình duyệt web lần đầu tiên.
Truy vấn Phương tiện
Với Truy vấn phương tiện, hãy thêm một điểm ngắt trong đó một số phần của thiết kế hoạt động khác nhau ở mỗi bên của điểm ngắt.
Thuộc tính chiều rộng và chiều cao hình ảnh
Để hình ảnh phản hồi, bạn cần đặt thuộc tính chiều rộng thành 100% và chiều cao thành tự động.