Điều chỉnh giao diện người dùng theo khả năng tốc độ làm mới của màn hình.
Truy vấn phương tiện CSS là một giải pháp giúp bạn kiểm soát giao diện của trang web hoặc ứng dụng web dựa trên trên thiết bị mà quảng cáo đó đang được xem. Với truy vấn phương tiệ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à các yếu tố khác.
Chiến lược phát hành đĩa đơn
update
truy vấn phương tiện cung cấp cho bạn một cách để điều chỉnh giao diện người dùng theo tốc độ làm mới của thiết bị. Chiến lược phát hành đĩa đơn
tính năng có thể báo cáo giá trị fast
, slow
hoặc none
liên quan đến
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ị bạn thiết kế có khả năng có tốc độ làm mới nhanh. Chiến dịch 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 hay không để kết xuất nội dung và kiểu cho phù hợp mà vẫn truyền một biểu đị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ể gặp lỗi tốc độ làm mới. Biết rằng thiết bị không thể xử lý ảnh động hoặc tần suất giúp tiết kiệm mức sử dụng pin hoặc 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àn hình mực điện tử chỉ có thể
cung cấp một lượt hiển thị duy nhất. Đầu ra như thế này hoàn toàn không thể làm mới và
có tên là none
. Bạn có thể truy vấn đoạ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 tăng cường dần bằng cách sử dụng truy vấn phương tiện cập nhật mới sau đây: