Thiết kế responive web là cách làm cho trang web trở nên “mềm dẻo” hay trông đẹp mắt trên tất cả các thiết bị và các kích cỡ màn hình. Ví dụ sau là hình ảnh một trang web hiển thị trên 3 màn hình desktop, tablet, và phone:

(nguồn w3schools.com)

Viewport

Là khung nhìn của một trang web đến người dùng. Khung nhìn sẽ thay đổi theo kích thước màn hình (như desktop, tablet, phone).

Nhằm tương thích với tất cả các kích cỡ màn hình (hay thiết bị), HTML5 cung cấp thẻ <meta> để kiểm soát viewport. Khai báo thẻ <meta> trong trang web như sau:


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

width=device-width: thiết lập chiều ngang (width) trang web theo chiều ngang thiết bị.

initial-scale=1.0: thiết lập mức zoom ban đầu khi trang được tải lần đầu bởi trình duyệt.

Tham khảo thêm về viewport tại  https://www.w3schools.com/css/css_rwd_viewport.asp

Grid view

Trang web có thể được thiết kế theo nhiều cột giúp cho việc đặt các phần tử trong trang được dễ dàng hơn.

Tham khảo cách tạo một Gridview tại https://www.w3schools.com/css/css_rwd_grid.asp

Media query

CSS3 cung cấp chỉ thị @media để có thể khai báo CSS khác nhau cho những màn hình kích cỡ khác nhau. Ví dụ khi kích cỡ màn hình hay cửa sổ trình duyệt nhỏ hơn 500px thì màu nền sẽ chuyển sang đỏ, chúng ta khai báo như sau:


@media only screen and (max-width: 500px) {

body {

background-color: red;

}

}

Tham khảo thêm về media queries tại https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Một số lưu ý để trang web của bạn có thể “responsive”:

  • KHÔNG sử dụng các phần tử có chiều rộng cố định lớn – Ví dụ: nếu một hình ảnh được hiển thị ở chiều rộng rộng hơn khung nhìn, nó có thể làm cho khung nhìn xuất hiện thanh cuộn theo chiều ngang – tuy nhiên thanh cuộn theo chiều ngang không hỗ trợ. Hãy nhớ điều chỉnh nội dung này để phù hợp với chiều rộng của khung nhìn.
  • KHÔNG để nội dung lệ thuộc vào chiều rộng của một khung nhìn cụ thể – Vì kích thước và chiều rộng của màn hình trong CSS pixel rất khác nhau giữa các thiết bị.
  • Sử dụng media queries để áp dụng các kiểu dáng khác nhau cho màn hình nhỏ và lớn.

Responsive Frameworks

Chúng ta có thể thiết kế responsive web nhanh chóng, hiệu quả nhờ các frameworks cung cấp sẵn:

Học HTML & CSS >