ปรับ UI ให้สอดคล้องกับความสามารถของอัตราการรีเฟรชหน้าจอ
คำค้นหาสื่อของ CSS เป็นเครื่องมือที่มีประสิทธิภาพซึ่งช่วยให้คุณควบคุมรูปลักษณ์ของเว็บไซต์หรือแอปเว็บตามอุปกรณ์ที่กำลังดูอยู่ได้ ด้วยคำค้นหาสื่อ คุณสามารถสร้างเลย์เอาต์ที่แตกต่างกันสำหรับขนาดหน้าจอ การวางแนว และปัจจัยอื่นๆ ที่แตกต่างกันได้
คำค้นหาสื่อ update ให้คุณปรับ UI ตามอัตราการรีเฟรชของอุปกรณ์ได้ ฟีเจอร์นี้สามารถรายงานค่า fast, slow หรือ none ซึ่งเกี่ยวข้องกับความสามารถของอุปกรณ์ต่างๆ
อุปกรณ์และอัตราการรีเฟรช
อุปกรณ์ส่วนใหญ่ที่คุณออกแบบไว้มีแนวโน้มที่จะมีอัตราการรีเฟรชที่เร็ว ซึ่งรวมถึงเดสก์ท็อปและอุปกรณ์เคลื่อนที่ส่วนใหญ่
คุณสามารถค้นหาอุปกรณ์เพื่อดูว่าอุปกรณ์มีอัตราการรีเฟรชที่รวดเร็วสำหรับการแสดงผลเนื้อหาหรือไม่ แล้วจึงจัดรูปแบบตามนั้นขณะที่ยังคงแสดงสไตล์ชีตเดียว
@media (update: fast) {
/* computer screens, totally cool to animate */
}
eReader และอุปกรณ์ต่างๆ เช่น ระบบการชำระเงินที่ใช้พลังงานต่ำ อาจมีอัตราการรีเฟรชที่ช้า การทราบว่าอุปกรณ์ไม่สามารถจัดการภาพเคลื่อนไหวหรือการอัปเดตบ่อยๆ ได้ หมายความว่าคุณสามารถประหยัดการใช้งานแบตเตอรี่หรืออัปเดตมุมมองที่ผิดพลาด
@media (update: slow) {
/* e-book readers or severely underpowered devices */
}
สุดท้ายนี้ มีบางสถานการณ์ เช่น จอแสดงผลแบบกระดาษหรือ e-ink ที่อาจมีบัตรผ่านสำหรับแสดงผลเพียง 1 ใบเท่านั้น เอาต์พุตแบบนี้รีเฟรชไม่ได้เลย และเรียกว่า none โดยจะค้นหาในลักษณะนี้
@media (update: none) {
/* one time render like printed paper */
}
ใน CodePen ต่อไปนี้ ให้ดูภาพเคลื่อนไหวแบบวางเมาส์ที่ค่อยๆ ปรับปรุงขึ้นโดยใช้คิวรี่สื่อที่อัปเดตใหม่นี้