Cú pháp mới cho truy vấn nội dung đa phương tiện trong phạm vi

Tìm hiểu cách cú pháp mới này có thể đơn giản hoá các truy vấn nội dung nghe nhìn.

Rachel Andrew

Truy vấn nội dung đa phương tiện đã bật thiết kế đáp ứng và các tính năng phạm vi cho phép kiểm tra kích thước tối thiểu và tối đa của khung nhìn được khoảng 80% trang web sử dụng truy vấn nội dung nghe nhìn sử dụng. Thông số kỹ thuật cấp 4 của Truy vấn nội dung đa phương tiện bao gồm cú pháp được cải thiện cho các truy vấn phạm vi này.

Hỗ trợ trình duyệt

Nguồn

Các ví dụ sau cho thấy cách công cụ này có thể đơn giản hoá truy vấn của bạn.

Quy trình kiểm thử truy vấn nội dung đa phương tiện điển hình cho chiều rộng khung nhìn tối thiểu sẽ được viết như sau:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Cú pháp mới cho phép sử dụng toán tử so sánh:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Kiểm tra chiều rộng tối đa:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

Và phiên bản sử dụng cú pháp cấp 4:

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

Cú pháp này có thể đơn giản hoá các truy vấn, đặc biệt là khi kiểm tra giữa hai độ rộng. Trong ví dụ sau, truy vấn đa phương tiện sẽ kiểm thử khung nhìn có chiều rộng tối thiểu là 400px và chiều rộng tối đa là 600px.

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

Bạn có thể viết lại mã này bằng cú pháp mới như sau:

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

Tính năng mà bạn đang kiểm thử, trong trường hợp này là width, sẽ nằm giữa hai giá trị.

Ngoài việc giúp các truy vấn nội dung nghe nhìn ít chi tiết hơn, cú pháp mới còn có lợi thế là độ chính xác. Truy vấn min- và max- bao gồm các giá trị được chỉ định, ví dụ: phép kiểm thử min-width: 400px cho chiều rộng từ 400px trở lên. Cú pháp mới này giúp bạn hiểu rõ ý nghĩa của mình hơn và tránh khả năng xung đột với các truy vấn.

Để sử dụng cú pháp phạm vi mới khi tính đến các trình duyệt chưa triển khai, có một trình bổ trợ PostCSS sẽ ghi lại cú pháp mới thành cú pháp cũ trong biểu định kiểu của bạn.