ไวยากรณ์ใหม่สำหรับคำค้นหาสื่อตามช่วงขนาด

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

ดูว่าไวยากรณ์ใหม่นี้ช่วยเพิ่มประสิทธิภาพการค้นหาสื่อได้อย่างไร

Rachel Andrew

คิวรี่สื่อช่วยให้ใช้การออกแบบที่ตอบสนองตามอุปกรณ์ได้ และฟีเจอร์ช่วงซึ่งช่วยให้ทดสอบขนาดต่ำสุดและสูงสุดของวิวพอร์ตได้นั้นเว็บไซต์ประมาณ 80% ที่ใช้คิวรี่สื่อนำมาใช้ ข้อกําหนดของ Media Queries ระดับ 4 มีไวยากรณ์ที่ปรับปรุงแล้วสําหรับการค้นหาช่วงเหล่านี้

ตัวอย่างต่อไปนี้แสดงวิธีที่เครื่องมือนี้ช่วยเพิ่มประสิทธิภาพการค้นหา

การทดสอบ Media Query ทั่วไปสำหรับความกว้างของวิวพอร์ตขั้นต่ำจะเขียนดังนี้

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

ไวยากรณ์ใหม่นี้อนุญาตให้ใช้โอเปอเรเตอร์การเปรียบเทียบ

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

การทดสอบความกว้างสูงสุด

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

และเวอร์ชันที่ใช้ไวยากรณ์ระดับ 4

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

รูปแบบคำสั่งนี้อาจช่วยเพิ่มประสิทธิภาพการค้นหาได้ โดยเฉพาะเมื่อทดสอบระหว่างความกว้าง 2 ระดับ ในตัวอย่างนี้ คิวรีสื่อจะทดสอบวิวพอร์ตที่มีความกว้างขั้นต่ำ 400 พิกเซลและความกว้างสูงสุด 600 พิกเซล

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

ซึ่งเขียนใหม่โดยใช้ไวยากรณ์ใหม่ได้ดังนี้

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

ฟีเจอร์ที่คุณทดสอบ ซึ่งในกรณีนี้คือ width อยู่ในช่วงระหว่าง 2 ค่า

นอกจากจะทำให้การค้นหาสื่อสั้นลงแล้ว ไวยากรณ์ใหม่ยังมีข้อดีในด้านความแม่นยำด้วย การค้นหา min- และ max- จะรวมค่าที่ระบุไว้ เช่น การทดสอบ min-width: 400px สำหรับความกว้าง 400 พิกเซลขึ้นไป ไวยากรณ์ใหม่ช่วยให้คุณระบุสิ่งที่ต้องการได้ชัดเจนยิ่งขึ้นและหลีกเลี่ยงการค้นหาที่อาจทับซ้อนกัน

หากต้องการใช้ไวยากรณ์ช่วงแบบใหม่โดยคำนึงถึงเบราว์เซอร์ที่ยังไม่ได้ใช้งาน เรามีปลั๊กอิน PostCSS ที่จะเขียนไวยากรณ์ใหม่เป็นไวยากรณ์แบบเก่าในสไตลชีต