CSS อัปเดต Media Query

ปรับ UI ให้สอดคล้องกับความสามารถในการอัตราการรีเฟรชของหน้าจอ

Adam Argyle

คำค้นหาสื่อของ 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 */
}

สุดท้าย อาจมีสถานการณ์ต่างๆ เช่น กระดาษแบบพิมพ์หรือหมึกอิเล็กทรอนิกส์ เสนอการส่งการแสดงผลครั้งเดียว เอาต์พุตแบบนี้ไม่สามารถรีเฟรชได้และ ซึ่งเรียกว่า none ซึ่งอาจค้นหาได้ดังนี้

@media (update: none) {
  /* one time render like printed paper */
}

ใน CodePen ต่อไปนี้ โปรดดูภาพเคลื่อนไหวขณะวางเมาส์ที่ปรับปรุงขึ้นเรื่อยๆ โดยใช้ คิวรี่สื่อที่อัปเดตใหม่นี้:

แหล่งข้อมูลเพิ่มเติม

• การค้นหาสื่อ CSS ระดับ 4
• อัปเดตการค้นหาสื่อใน MDN