CSS อัปเดต Media Query

ปรับ UI ให้เหมาะกับอัตราการรีเฟรชของหน้าจอ

Adam Argyle
Adam Argyle
X GitHub

Media Query ของ CSS เป็นเครื่องมือที่มีประสิทธิภาพซึ่งช่วยให้คุณควบคุมลักษณะที่ปรากฏของเว็บไซต์หรือเว็บแอปตามอุปกรณ์ที่ดู คิวรี่สื่อช่วยให้คุณสร้างเลย์เอาต์ที่แตกต่างกันสำหรับหน้าจอขนาดต่างๆ การวางแนว และปัจจัยอื่นๆ ได้

ข้อความค้นหาสื่อ update ช่วยให้คุณปรับ UI ให้เข้ากับอัตราการรีเฟรชของอุปกรณ์ได้ ฟีเจอร์นี้สามารถรายงานค่า fast, slow หรือ none ซึ่งเกี่ยวข้องกับความสามารถของอุปกรณ์ต่างๆ

การรองรับเบราว์เซอร์

  • Chrome: 113
  • Edge: 113
  • Firefox: 102
  • Safari: 17.

แหล่งที่มา

อุปกรณ์และอัตราการรีเฟรช

อุปกรณ์ส่วนใหญ่ที่คุณออกแบบมีแนวโน้มที่จะใช้อัตราการรีเฟรชที่เร็ว ซึ่งรวมถึงเดสก์ท็อปและอุปกรณ์เคลื่อนที่ส่วนใหญ่

คุณสามารถค้นหาอุปกรณ์ ดูว่าอุปกรณ์มีการรีเฟรชที่รวดเร็วสำหรับการแสดงผลเนื้อหาหรือไม่ และจัดสไตล์ให้เหมาะสมขณะที่ยังคงแสดงสไตล์ชีตเดียว

@media (update: fast) {
  /* computer screens, totally cool to animate */
}

eReader และอุปกรณ์ต่างๆ เช่น ระบบการชำระเงินที่ใช้พลังงานต่ำอาจมีอัตราการรีเฟรชช้า การทราบว่าอุปกรณ์ไม่สามารถแสดงภาพเคลื่อนไหวหรือการอัปเดตบ่อยๆ จะช่วยให้คุณประหยัดแบตเตอรี่หรืออัปเดตมุมมองที่ไม่ถูกต้องได้

@media (update: slow) {
  /* e-book readers or severely underpowered devices */
}

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

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

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

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