Truy vấn về nội dung nghe nhìn

Nhà thiết kế có thể điều chỉnh thiết kế cho phù hợp với người dùng. Ví dụ rõ ràng nhất cho trường hợp này là hệ số hình dạng thiết bị của người dùng; chiều rộng, tỷ lệ khung hình của thiết bị, v.v. Khi sử dụng các truy vấn nội dung đa phương tiện, nhà thiết kế có thể phản hồi với nhiều hệ số hình dạng này.

Truy vấn nội dung nghe nhìn được bắt đầu bằng từ khoá @media (một CSS theo quy tắc) và có thể dùng cho nhiều trường hợp sử dụng.

Nhắm đến nhiều loại dữ liệu đầu ra

Các trang web thường xuất hiện trên màn hình, nhưng CSS cũng có thể được dùng để định kiểu trang web cho các kết quả đầu ra khác. Bạn có thể muốn các trang web của mình hiển thị một cách trên màn hình nhưng lại khác khi được in ra. Truy vấn loại phương tiện truyền thông giúp bạn thực hiện được điều này.

Trong ví dụ này, màu nền được đặt thành màu xám. Tuy nhiên, nếu trang được in thì màu nền phải trong suốt. Thao tác này sẽ giúp người dùng tiết kiệm mực máy in.

body {
  color: black;
  background-color: grey;
}

@media print {
  body {
    background-color: transparent;
  }
}

Bạn có thể sử dụng thuộc tính quy tắc @media trong biểu định kiểu như vậy hoặc tạo một biểu định kiểu riêng và sử dụng thuộc tính media trên phần tử link:

<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="print.css" media="print">

Nếu bạn không chỉ định loại nội dung nghe nhìn nào cho CSS của mình, thì CSS sẽ tự động có giá trị loại nội dung nghe nhìn là all. Hai khối CSS này tương đương nhau:

body {
  color: black;
  background-color: white;
}

@media all {
   body {
     color: black;
     background-color: white;
   }
}

Hai dòng HTML này cũng tương đương nhau:

<link rel="stylesheet" href="global.css">

<link rel="stylesheet" href="global.css" media="all">

Điều kiện truy vấn

Bạn có thể thêm điều kiện vào loại nội dung nghe nhìn. Những truy vấn này được gọi là truy vấn phương tiện. CSS chỉ được áp dụng nếu loại nội dung đa phương tiện khớp và điều kiện cũng đúng. Những điều kiện này được gọi là tính năng đa phương tiện.

Đây là cú pháp cho truy vấn phương tiện:

@media type and (feature)

Bạn có thể dùng các truy vấn phương tiện trên phần tử link nếu các kiểu của bạn nằm trong một biểu định kiểu riêng:

<link rel="stylesheet" href="specific.css" media="type and (feature)">

Giả sử bạn muốn áp dụng các kiểu khác nhau tuỳ thuộc vào việc cửa sổ trình duyệt ở chế độ ngang (chiều rộng khung nhìn lớn hơn chiều cao) hay chế độ dọc (chiều cao khung nhìn lớn hơn chiều rộng). Bạn có thể kiểm thử một tính năng nội dung đa phương tiện có tên là orientation để kiểm thử:

@media all and (orientation: landscape) {
   // Styles for landscape mode.
}
@media all and (orientation: portrait) {
   // Styles for portrait mode.
}

Hoặc nếu bạn muốn có các biểu định kiểu riêng biệt:

<link rel="stylesheet" href="landscape.css" media="all and (orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="all and (orientation: portrait)">

Trong trường hợp này, loại nội dung đa phương tiện là all. Vì đó là giá trị mặc định, nên bạn có thể bỏ chọn giá trị này nếu muốn:

@media (orientation: landscape) {
   // Styles for landscape mode.
}
@media (orientation: portrait) {
   // Styles for portrait mode.
}

Hoặc sử dụng biểu định kiểu riêng biệt:

<link rel="stylesheet" href="landscape.css" media="(orientation: landscape)">
<link rel="stylesheet" href="portrait.css" media="(orientation: portrait)">

Mặc dù việc sử dụng các biểu định kiểu riêng biệt cho các loại nội dung đa phương tiện (như print) có thể được, nhưng bạn không nên dùng một biểu định kiểu riêng cho mỗi truy vấn nội dung nghe nhìn. Thay vào đó, hãy sử dụng quy tắc @media.

Điều chỉnh kiểu dựa trên kích thước khung nhìn

Đối với thiết kế đáp ứng, một trong những tính năng đa phương tiện hữu ích nhất liên quan đến kích thước của khung nhìn trình duyệt. Để áp dụng kiểu khi cửa sổ trình duyệt rộng hơn một chiều rộng nhất định, hãy sử dụng min-width.

@media (min-width: 400px) {
  // Styles for viewports wider than 400 pixels.
}

Sử dụng tính năng đa phương tiện max-width để áp dụng các kiểu dưới một chiều rộng nhất định:

@media (max-width: 400px) {
  // Styles for viewports narrower than 400 pixels.
}

Bạn có thể sử dụng bất kỳ đơn vị độ dài CSS nào trong các truy vấn nội dung nghe nhìn. Nếu nội dung của bạn chủ yếu dựa trên hình ảnh thì pixel có thể phù hợp nhất. Nếu nội dung của bạn chủ yếu dựa trên văn bản, bạn nên sử dụng đơn vị tương đối dựa trên kích thước văn bản, chẳng hạn như em hoặc ch:

@media (min-width: 25em) {
  // Styles for viewports wider than 25em.
}

Bạn cũng có thể kết hợp các truy vấn nội dung nghe nhìn để áp dụng nhiều điều kiện. Sử dụng từ and để kết hợp các truy vấn phương tiện của bạn:

@media (min-width: 50em) and (max-width: 60em) {
  // Styles for viewports wider than 50em and narrower than 60em.
}

Chọn các điểm ngắt dựa trên nội dung

Điểm mà điều kiện của tính năng nội dung đa phương tiện trở thành đúng được gọi là điểm ngắt. Tốt nhất là bạn nên chọn điểm ngắt dựa trên nội dung của mình thay vì kích thước thiết bị phổ biến, vì các điểm ngắt đó có thể thay đổi theo mỗi chu kỳ phát hành công nghệ.

Trong ví dụ này, 50em là điểm mà tại đó các dòng văn bản trở nên dài một cách khó chịu. Vì vậy, một điểm ngắt được tạo để làm cho giao diện dễ đọc hơn. Bằng cách sử dụng thuộc tính column-count, văn bản được chia thành hai cột từ thời điểm đó trở đi.

@media (min-width: 50em) {
  article {
    column-count: 2;
  }
}

Kết hợp

Bạn có thể sử dụng truy vấn phương tiện dựa trên chiều cao của khung nhìn chứ không chỉ dựa trên chiều rộng. Điều này có thể hữu ích cho việc tối ưu hoá nội dung giao diện "trong màn hình đầu tiên". Trong ví dụ trước, nếu độc giả đang sử dụng cửa sổ trình duyệt rộng nhưng ngắn, họ phải cuộn xuống một cột rồi cuộn lên lại để đến đầu cột thứ hai. Sẽ an toàn hơn nếu bạn chỉ áp dụng các cột khi khung nhìn đủ rộng và đủ cao.

Bạn có thể kết hợp các truy vấn nội dung nghe nhìn để các kiểu chỉ áp dụng khi tất cả các điều kiện đều đúng. Trong ví dụ này, khung nhìn phải có chiều rộng tối thiểu là 50em và chiều cao tối thiểu là 60em để áp dụng kiểu cột. Những điểm ngắt đó được chọn dựa trên lượng nội dung.

@media (min-width: 50em) and (min-height: 60em) {
  article {
    column-count: 2;
  }
}

Những ví dụ này cho thấy cách sử dụng truy vấn phương tiện để điều chỉnh thiết kế cho phù hợp với hệ số hình dạng thiết bị của người dùng, nhưng đây chỉ là một số khả năng ban đầu. Truy vấn nội dung nghe nhìn có thể vượt xa chiều rộng và chiều cao, truy cập vào lựa chọn ưu tiên của người dùng về bộ tính năng hỗ trợ tiếp cận và màu giao diện. Việc sử dụng truy vấn phương tiện để điều chỉnh bố cục là một khởi đầu tuyệt vời cho thiết kế đáp ứng, được xây dựng dựa trên các tính năng này và nhiều tính năng khác.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về truy vấn nội dung nghe nhìn thích ứng.