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

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

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

Nhắm đến nhiều loại đầu ra

Trang web thường hiển thị trên màn hình, nhưng bạn cũng có thể dùng CSS để tạo kiểu cho trang web cho các đầu ra khác. Bạn có thể muốn trang web của mình hiển thị theo một cách trên màn hình nhưng khác khi in ra. Bạn có thể thực hiện việc này bằng cách truy vấn các loại nội dung nghe nhìn.

Trong ví dụ này, màu nền được đặt thành màu xám. Nhưng nếu trang được in, màu nền phải trong suốt. Điều này giúp tiết kiệm mực in của người dùng.

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

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

Bạn có thể sử dụng quy tắc at-@media trong biểu định kiểu của mình như vậy, hoặc bạn có thể 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 đa phương tiện nào cho CSS, thì CSS sẽ tự động có giá trị loại nội dung đa phương tiện là all. Hai khối CSS này tương đương với 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:

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

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

Các điều kiện về truy vấn

Bạn có thể thêm điều kiện vào loại nội dung nghe nhìn. Đây được gọi là truy vấn nội dung nghe nhìn. CSS chỉ được áp dụng nếu loại nội dung đa phương tiện trùng 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.

Dưới đây là cú pháp cho các truy vấn đa phương tiện:

@media type and (feature)

Bạn có thể sử dụng truy vấn nội dung nghe nhìn trên phần tử link nếu các kiểu của bạn nằm trong một tệp 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 có đang ở chế độ ngang hay không (chiều rộng khung nhìn lớn hơn chiều cao) hoặc chế độ dọc (chiều cao của khung nhìn lớn hơn chiều rộng). Có một tính năng đa phương tiện có tên là orientation mà bạn có thể sử dụng để kiểm thử điều đó:

@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ó 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, bạn có thể bỏ qua 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ù bạn có thể sử dụng biểu định kiểu riêng cho các loại nội dung đa phương tiện (chẳng hạn như print) nhưng điều này có thể chấp nhận được, bạn không nên sử dụng một biểu định kiểu riêng cho từng truy vấn nội dung đa phương tiện. Thay vào đó, hãy sử dụng @media quy tắc at.

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

Đối với thiết kế thích ứ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 nội dung đa phương tiện max-width để áp dụng kiểu bên 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ị đo lường chiều dài CSS nào trong 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, pixel có thể là giải pháp 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, có thể sẽ hợp lý hơn nếu bạ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 nội dung nghe nhìn:

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

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

Thời điểm mà một điều kiện của tính năng nội dung đa phương tiện trở thành true được gọi là điểm ngắt. 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 phổ biến của thiết bị, vì những chỉ số đó có thể thay đổi theo từng chu kỳ phát hành công nghệ.

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

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

Kết hợp

Bạn có thể sử dụng các truy vấn phương tiện dựa trên chiều cao của khung nhìn, chứ không chỉ chiều rộng. Điều này có thể hữu ích trong 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 người đọc đang sử dụng một 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 ngược lên để đến đầu cột thứ hai. Bạn nên chỉ áp dụng các cột khi khung nhìn vừa đủ rộng và vừa đủ 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 thì mới áp dụng được kiểu cột. Các đ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ỉ mới là bề mặt của những khả năng. 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 các lựa chọn ưu tiên của người dùng về các tính năng hỗ trợ tiếp cận và màu sắc giao diện. Việc sử dụng truy vấn đa phương tiện để điều chỉnh bố cục là một khởi đầu tuyệt vời cho một thiết kế thích ứng dựa trên các tính năng này và nhiều yếu tố khác.

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về truy vấn nội dung đa phương tiện thích ứng.