Điều chỉnh giao diện người dùng cho phù hợp với khả năng tốc độ làm mới của màn hình.
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ị mà người dùng sử dụng để xem trang web hoặc ứng dụng đó. Với truy vấn nội dung nghe nhìn, bạn có thể tạo các bố cục khác nhau cho nhiều kích thước màn hình, hướng và yếu tố khác.
Truy vấn nội dung nghe nhìn update cung cấp cho bạn một 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 một giá trị fast, slow hoặc none liên quan đến khả năng của nhiều thiết bị.
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ế có khả năng có tốc độ làm mới nhanh. Số liệu này bao gồm máy tính và hầu hết 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, đồng thời tạo kiểu phù hợp trong khi vẫn phân phối một biểu định kiểu duy nhất.
@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 sử dụng ít pin có thể có tốc độ làm mới chậm. Nếu biết rằng thiết bị không thể xử lý ảnh động hoặc bản cập nhật thường xuyên, bạn có thể tiết kiệm được 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ó một số trường hợp như màn hình giấy in hoặc màn hình mực điện tử chỉ cung cấp một lượt kết xuất hình ảnh. Đầu ra như thế này hoàn toàn không làm mới được và được gọi là none. Bạn có thể truy vấn mã này như sau:
@media (update: none) {
/* one time render like printed paper */
}
Trong CodePen sau đây, hãy xem ảnh động di chuột được cải tiến dần bằng cách sử dụng truy vấn phương tiện cập nhật mới này: