Thiết Kế Trang Web Phản Hồi - Truy vấn truyền thông

Truy vấn truyền thông là gì?

Truy vấn truyền thông là một kỹ thuật CSS được giới thiệu trong CSS3.

Nó chỉ được sử dụng khi đáp ứng các điều kiện cụ thể. @media Quy tắc để tham chiếu khối thuộc tính CSS.

Mẫu

Nếu cửa sổ trình duyệt là 600px hoặc nhỏ hơn, thì màu nền sẽ là màu xanh nhạt:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Thử nghiệm trực tiếp

Thêm điểm ngắt

Trong phần sớm hơn của hướng dẫn này, chúng tôi đã tạo một trang web chứa các dòng và cột, nhưng trang web phản hồi này trông không tốt trên màn hình nhỏ.

Truy vấn truyền thông có thể giúp bạn. Chúng ta có thể thêm một điểm ngắt mà ở đó một số phần của thiết kế sẽ có khác biệt ở mỗi bên của điểm ngắt.


Máy tính để bàn

Điện thoại

Thêm điểm ngắt tại 768px bằng truy vấn truyền thông:

Mẫu

Khi màn hình (cửa sổ trình duyệt) nhỏ hơn 768px, độ rộng của mỗi cột nên là 100％:

/* Đối với thiết bị bàn: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
  /* Đối với điện thoại: */
  [class*="col-"] {
    width: 100%;
  }
}

Thử nghiệm trực tiếp

Thường xuyên ưu tiên thiết kế di động

Ưu tiên di động (Mobile First) có nghĩa là trước khi thiết kế cho máy tính để bàn hoặc bất kỳ thiết bị nào khác, chúng ta nên ưu tiên thiết kế cho thiết bị di động (điều này sẽ làm cho trang web hiển thị nhanh hơn trên các thiết bị nhỏ hơn).

Điều này có nghĩa là chúng ta phải làm một số cải tiến trong CSS.

Khi độ rộng nhỏ hơn 768px, chúng ta nên sửa đổi thiết kế而不是 thay đổi độ rộng. Chúng tôi đã thực hiện thiết kế 'ưu tiên di động' như vậy:

Mẫu

/* Đối với điện thoại: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* Đối với máy tính để bàn: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Thử nghiệm trực tiếp

Một điểm ngắt khác

Bạn có thể thêm bất kỳ số điểm ngắt nào.

Chúng tôi cũng sẽ chèn một điểm ngắt giữa máy tính bảng và điện thoại.


Máy tính để bàn

Máy tính bảng

Điện thoại

Vì vậy, chúng tôi đã thêm một truy vấn truyền thông (tại 600 điểm ảnh), và thêm một nhóm lớp mới cho các thiết bị lớn hơn 600 điểm ảnh (nhưng nhỏ hơn 768 điểm ảnh):

Mẫu

Lưu ý, hai nhóm lớp gần như giống hệt nhau, duy nhất sự khác biệt là tên (col- và col-s-):

/* Đối với điện thoại: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* Đối với máy tính bảng: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* Đối với máy tính để bàn: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Có hai nhóm lớp giống hệt nhau có vẻ lạ lùng, nhưng nó cho chúng ta cơ hội sử dụng HTML để quyết định điều gì sẽ xảy ra với các cột tại mỗi điểm ngắt:

Mã HTML mẫu

Đối với máy tính để bàn:

Phần đầu tiên và thứ ba sẽ chiếm 3 cột. Phần giữa sẽ chiếm 6 cột.

Đối với máy tính bảng:

Phần đầu tiên sẽ chiếm 3 cột, phần thứ hai sẽ chiếm 9 cột, phần thứ ba sẽ hiển thị dưới phần đầu tiên và thứ hai, và sẽ chiếm 12 cột:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Thử nghiệm trực tiếp

Điểm chín thiết bị tiêu chuẩn

Có vô số màn hình và thiết bị có kích thước chiều cao và chiều rộng khác nhau, vì vậy rất khó tạo ra điểm chín chính xác cho mỗi thiết bị. Để đơn giản hóa, bạn có thể nhắm đến năm nhóm này:

Mẫu

/* Các thiết bị siêu nhỏ (điện thoại, 600px và nhỏ hơn) */
@media only screen and (max-width: 600px) {...} 
/* Các thiết bị nhỏ (máy tính bảng dọc và điện thoại lớn, 600 pixel và lớn hơn) */
@media only screen and (min-width: 600px) {...} 
/* Các thiết bị trung (máy tính bảng ngang, 768 pixel và lớn hơn) */
@media only screen and (min-width: 768px) {...} 
/* Các thiết bị lớn (laptop/máy tính để bàn, 992px và lớn hơn) */
@media only screen and (min-width: 992px) {...} 
/* Các thiết bị lớn (laptop và máy tính để bàn, 1200px và lớn hơn) */
@media only screen and (min-width: 1200px) {...}

Thử nghiệm trực tiếp

Hướng: Hình người / Cảnh quan

Điều kiện truyền thông cũng có thể được sử dụng để thay đổi bố cục của trang web dựa trên hướng của trình duyệt.

Bạn có thể thiết lập một nhóm thuộc tính CSS, những thuộc tính này chỉ áp dụng khi chiều rộng của cửa sổ trình duyệt lớn hơn chiều cao, tức là hướng "ngang":

Mẫu

Nếu hướng là chế độ ngang (landscape mode), thì nền trang web sẽ là màu xanh nhạt:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Thử nghiệm trực tiếp

Sử dụng điều kiện truyền thông để ẩn yếu tố

Một cách sử dụng phổ biến khác của điều kiện truyền thông là ẩn các yếu tố trên các kích thước màn hình khác nhau:

Mẫu

/* Nếu kích thước màn hình là 600 pixel hoặc nhỏ hơn, hãy ẩn yếu tố này */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Thử nghiệm trực tiếp

Thay đổi kích thước font bằng điều kiện truyền thông

Bạn cũng có thể sử dụng điều kiện truyền thông để thay đổi kích thước font của các yếu tố trên các kích thước màn hình khác nhau:

Mẫu

/* Nếu kích thước màn hình là 601px hoặc lớn hơn, hãy đặt font-size của <div> thành 80px */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* Nếu kích thước màn hình là 600px hoặc nhỏ hơn, hãy đặt font-size của <div> là 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Thử nghiệm trực tiếp

Tài liệu tham khảo CSS @media

Để có một cái nhìn toàn diện về tất cả các loại hình truyền thông và các tính năng / biểu thức, hãy xem Xem @media quy tắc trong Tài liệu tham khảo CSS.