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 theo khả năng tốc độ làm mới của màn hình.

Adam Argyle

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:

Tài nguyên khác

• Cụm từ tìm kiếm về nội dung truyền thông CSS cấp 4
• Cập nhật truy vấn nội dung nghe nhìn trên MDN