ในการทำเว็บแบบ responsive เราก็มักจะใช้ media query min-width กับ max-width ในการ detect ขนาดหน้าจอ ซึ่งถ้าเข้าเงื่อนไข จะให้ css เป็นแบบไหนก็สุดแล้วแต่จะใส่กันเข้าไปได้

มาลองดูตัวอย่างกัน

Min Width Example

min-width จะทำงานก็ต่อเมื่อหน้าจอมีขนาดขั้นต่ำ ตามค่าที่เรากำหนด

Old way

วิธีการเดิม เราก็จะเขียน min-width แล้วตามด้วยค่าที่เราอยากได้ แบบนี้

@media (min-width: 500px) {
  /* styles */
}

New way

แบบใหม่คือเราสามารถใช้ >= (อ่านว่ามากกว่าหรือเท่ากับ) มาช่วยให้อ่านง่ายขึ้นกว่าเดิมได้ ก็จะเป็นแบบนี้

@media (width >= 500px) {
  /* styles */
}

Max Width Example

max-width จะทำงานก็ต่อเมื่อขนาดหน้าจอยังอยู่ในช่วงค่าที่เรากำหนด

Old way

แบบเดิมก็จะเหมือน min-width ก่อนหน้า คือใส่ max-width แล้วใส่ค่าสูงสุดที่เรายังอยากให้ css นั้นทำงานอยู่

@media (max-width: 800px) {
  /* styles */
}

New way

แบบใหม่ก็เช่นกัน ก็จะเป็น <= (อ่านว่าน้อยว่าหรือเท่ากับ) เข้ามาช่วย

@media (width <= 800px) {
  /* styles */
}

2 Condition

เราสามารถใช้ 2 condition ได้ด้วยนะ

ตัวอย่าง ถ้าอยากให้แสดงเฉพาะหน้าจอช่วย 500px ถึง 800px ก็จะเป็นแบบนี้

@media (500px <= width <= 800px) {
  /* styles */
}

ผลลัพธ์ก็จะเป็นแบบนี้