Truy vấn nội dung nghe nhìn cập nhật về CSS

Điều chỉnh giao diện người dùng cho phù hợp với khả năng làm mới của màn hình.

Adam Argyle

Truy vấn nội dung nghe nhìn CSS là một công cụ mạnh mẽ cho phép bạn kiểm soát giao diện của trang web hoặc ứng dụng web dựa trên thiết bị đang xem. Với truy vấn nội dung đa phương tiện, bạn có thể tạo nhiều bố cục cho nhiều kích thước màn hình, hướng và các yếu tố khác.

Truy vấn nội dung đa phương tiện update cho phép bạn điều chỉnh giao diện người dùng theo tốc độ làm mới của thiết bị. Tính năng này có thể báo cáo giá trị fast, slow hoặc none liên quan đến chức năng của các thiết bị khác nhau.

Thiết bị và tốc độ làm mới

Hầu hết các thiết bị mà bạn thiết kế đều có thể có tốc độ làm mới nhanh. Điều này bao gồm máy tính để bàn và hầu hết các thiết bị di động.

Bạn có thể truy vấn thiết bị, xem thiết bị có tốc độ làm mới nhanh để hiển thị nội dung và kiểu tương ứng hay không, trong khi vẫn phân phối một kiểu trang.

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

Máy đọc sách điện tử và các thiết bị như hệ thống thanh toán có công suất thấp có thể có tốc độ làm mới chậm. Khi biết rằng thiết bị không thể xử lý ảnh động hoặc các bản cập nhật thường xuyên, bạn có thể tiết kiệm mức sử dụng pin hoặc các bản cập nhật chế độ xem bị lỗi.

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

Cuối cùng, có những trường hợp như giấy in hoặc màn hình mực điện tử chỉ có thể cung cấp một lượt kết xuất duy nhất. Đầu ra như thế này hoàn toàn không thể làm mới và được gọi là none. Bạn có thể truy vấn như sau:

@media (update: none) {
  /* one time render like printed paper */
}

Trong CodePen sau đây, hãy xem ảnh động khi di chuột được cải thiện dần bằng cách sử dụng truy vấn nội dung đa phương tiện cập nhật mới này:

Tài nguyên khác

• Truy vấn nội dung đa phương tiện CSS cấp 4
• Cập nhật truy vấn nội dung nghe nhìn trên MDN