Media query

Giúp định nghĩa CSS cho từng loại thiết bị, từng loai kích thước màn hình

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

width = device-width (chiều rộng trang web bằng chiều rộng thiết bị)
initial-scale = 1.0 (zoom là 1, trang web sẽ KO bị zoom khi màn hình ở độ phân giải thấp như trên di động)

cách thiết kế trang web responsive sử dụng fluid (liquid) layout:

1. luôn set  <meta name="viewport" content = "width = device-width, initial-scale = 1.0"/>
2. sử dụng max-width cho thẻ div.wrap
3. sử dụng %  để set width cho các element khác bằng bao nhiêu % của thằng cha của nó

Responsive:
trên mobile người dùng ko phải cuộn ngang để xem nội dung
chữ không bị nhỏ quá
ảnh không bị nhỏ quá

 

Chú ý

Chú ý khi thiết kế giao diện web responsive chúng ta nên thiết kế cho mobile trước (Mobile first CSS) bởi vì làm theo cách này thường sẽ dễ hơn và giúp file CSS của chúng ta nhẹ hơn, do đó load trang web sẽ nhanh hơn.
Ví dụ tôi có 1 trang web giao diện 2 cột trên Desktop nhưng trên Mobile thì chỉ có 1 cột (do màn hình Mobile bé nên sẽ phải đơn giản hơn màn hình Desktop)Nếu tôi viết CSS cho Desktop trước, code của tôi sẽ trông như sau:

.content {
  /* Style cho màn hình Desktop */
  float: left; 
  width: 60%; 

  /* Style lại cho màn hình Mobile */
  @media (max-width: 800px) {
    float: none; 
    width: 100%; 
  }
}

Còn nếu viết CSS cho Mobile trước thì sẽ như sau:

.content {
  /* Mặc định chiều rộng của thẻ div là 100% nên không cần viết thêm gì */

  /* Viết lại style cho Desktop */
  @media (min-width: 800px) {
    float: left; 
    width: 60%; 
  }
}

Như vậy, viết theo kiểu Mobile first thì chúng ta đã tiết kiệm được 2 dòng code, và với 1 trang web càng lớn thì sẽ tiết kiệm được càng nhiều (bởi giao diện trên Desktop thường sẽ rất phức tạp so với giao diện mobile). Do đó chúng ta nên viết theo kiểu này, đặc điểm của nó là sử dụng đa số media feature min-width (đa số thôi, còn trong một số trường hợp chúng ta sẽ dùng các kiểu feature khác sao cho phù hợp và tối ưu nhất, code ngắn nhất).