![](/images/posts/endeavouros/commuanity.png)
ในการทำเว็บแบบ 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 */
}
ผลลัพธ์ก็จะเป็นแบบนี้