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 các truy vấn đ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 phương tiện update cung cấp cho bạn cách điều chỉnh giao diện người dùng cho phù hợp với 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.

Hỗ trợ trình duyệt

• 113
• 113
• 102
• 17

Nguồn

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 hay không và tạo kiểu tương ứng trong khi vẫn phân phối một tệp định kiểu duy nhất.

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

Thiết bị đọc sách điện tử và các thiết bị như hệ thống thanh toán 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 tình huống như màn hình giấy in hoặc 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