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 về điều này là kiểu dáng của thiết bị mà người dùng sử dụng; chiều rộng, tỷ lệ khung hình của thiết bị và các khía cạnh khác. Bằng cách sử dụng truy vấn nội dung nghe nhìn, nhà thiết kế có thể phản hồi những hệ số hình dạng khác nhau này.

Truy vấn nội dung nghe nhìn được bắt đầu bằng từ khoá @media (một quy tắc @ 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

Các trang web thường xuất hiện trên màn hình nhưng bạn cũng có thể dùng CSS để tạo kiểu cho các trang web cho những đầu ra khác. Bạn có thể muốn các trang web của mình có một giao diện trên màn hình nhưng lại có giao diện khác khi in ra. Việc truy vấn các loại nội dung nghe nhìn giúp bạn thực hiện được việc này.

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 người dùng tiết kiệm mực in.

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

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

Bạn có thể sử dụng quy tắc @media trong biểu định kiểu 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 phương tiện nào cho CSS, thì CSS sẽ tự động có giá trị loại phương tiệ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 cho các loại nội dung nghe nhìn. Đây được gọi là truy vấn về nội dung nghe nhìn. CSS chỉ được áp dụng nếu loại nội dung nghe nhì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 nội dung nghe nhìn.

Đây là cú pháp cho truy vấn 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 biểu định kiểu riêng biệt:

<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). Có một tính năng đa phương tiện tên là orientation mà bạn có thể dùng để 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 nghe nhìn là all. Vì đó là giá trị mặc định, nên bạn có thể bỏ qua nếu muốn:

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

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

Hoặc sử dụng các 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 nghe nhìn khác nhau (chẳng hạn như print), nhưng có lẽ bạn không nên sử dụng 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 hiển thị

Đố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 hiển thị trình duyệt. Để áp dụng kiểu khi cửa sổ trình duyệt có chiều rộng lớn 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 nghe nhìn max-width để áp dụng các 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ũng có thể viết truy vấn nội dung nghe nhìn này bằng cách sử dụng tính năng nội dung nghe nhìn width và toán tử nhỏ hơn hoặc bằng.

@media (width <= 400px) {
  /* Styles for viewports narrower than 400 pixels. */
}

Bạn có thể sử dụng mọi đơn vị chiều dài CSS trong truy vấn phương tiện. Nếu nội dung của bạn chủ yếu dựa trên hình ảnh, thì pixel có thể là lựa chọn 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, thì có lẽ bạn nên sử dụng một đơ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. /*
}

Bạn cũng có thể viết điều này bằng cú pháp dải ô.

@media (50em <= 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

Điểm mà điều kiện của tính năng đa phương tiện trở thành true đượ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ì những kích thước này 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à các dòng văn bản trở nên quá dài. Vì vậy, một điểm ngắt được tạo ra để 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 nội dung nghe nhìn dựa trên chiều cao của khung hiển thị, chứ không chỉ chiều rộng. Điều này có thể hữu ích khi 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. Sẽ an toàn hơn nếu bạn chỉ áp dụng các cột khi khung hiển thị đủ rộng và đủ cao

Bạn có thể kết hợp các truy vấn nội dung nghe nhìn để kiểu chỉ áp dụng khi tất cả các điều kiện đều đúng. Trong ví dụ này, khung hiển thị phải có chiều rộng tối thiểu là 50em và chiều cao tối thiểu là 30em để áp dụng 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: 30em) {
  article {
    column-count: 2;
  }
}

Bạn cũng có thể sử dụng các từ khoá or và not để thể hiện những tình huống phức tạp hơn khi muốn áp dụng kiểu. Đây có thể là những trường hợp khó suy luận một cách hợp lý, vì vậy, hãy nhớ kiểm thử để đảm bảo chúng hoạt động và tương tác như bạn mong đợi.

@media not ((width >= 30em) or (orientation: landscape)) {
  /* These styles won't be shown if the viewport is wider than 30em, or if the orientation is landscape. */
  .navlist {
    flex-direction: column;
  }
}

Những ví dụ này cho thấy cách sử dụng truy vấn nội dung nghe nhìn để điều chỉnh thiết kế cho phù hợp với hệ số hình dạng của thiết bị người dùng, nhưng đây chỉ là một phần nhỏ trong số những khả năng có thể. Các 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 đối với các tính năng hỗ trợ tiếp cận và màu sắc của giao diện. Sử dụng truy vấn nội dung đa phương tiện để điều chỉnh bố cục là một bước khởi đầu tuyệt vời cho thiết kế thích ứng, dựa trên những 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 đa phương tiện thích ứng.