กลยุทธ์ responsive แบบ mobile-first คืออะไร และ container query เข้ามาเกี่ยวข้องอย่างไร?

Question

Accepted Answer

**Mobile-first** หมายถึงการเขียนสไตล์พื้นฐานสำหรับ **หน้าจอเล็กที่สุด** ก่อน แล้วจึง *เพิ่ม* ความซับซ้อนสำหรับหน้าจอที่ใหญ่ขึ้นด้วย media query แบบ `min-width` แทนที่จะเริ่มจากเดสก์ท็อปแล้วค่อย ๆ ตัดสิ่งต่าง ๆ ออก

## Mobile-first ในทางปฏิบัติ

```css
/* base: mobile — single column, simple */
.layout { display: grid; gap: 1rem; }

/* enhance for tablet and up */
@media (min-width: 768px) {
  .layout { grid-template-columns: 1fr 2fr; }
}
/* enhance further for desktop */
@media (min-width: 1200px) {
  .layout { grid-template-columns: 1fr 2fr 1fr; }
}
```

**ทำไม mobile-first จึงเหนือกว่า:** CSS พื้นฐานยังคงน้อยที่สุด (มือถือได้รับเฉพาะสิ่งที่จำเป็นเท่านั้น ซึ่งดีต่อประสิทธิภาพบนอุปกรณ์ที่อ่อนกว่า) และคุณ *เพิ่มทีละชั้น* ของความซับซ้อน ซึ่งเข้าใจได้ง่ายกว่าการเขียนทับ/การลบออก อีกทั้งยังสอดคล้องกับวิธีที่เนื้อหาไหลปรับเปลี่ยนจากหนึ่งคอลัมน์ไปเป็นหลายคอลัมน์โดยธรรมชาติ

## ข้อจำกัดของ media query

Media query ตอบสนองต่อ **viewport** ซึ่งก็คือทั้งหน้าต่าง แต่ component ที่นำกลับมาใช้ใหม่ได้ (เช่น การ์ด) อาจปรากฏในพื้นที่หลักที่กว้าง *หรือ* ในแถบด้านข้างที่แคบบนหน้าเดียวกัน ความกว้างของ viewport ไม่สามารถบอกได้ว่า *component* นั้นมีพื้นที่จริงเท่าไร

## Container query แก้ปัญหานี้

```css
.card-wrapper {
  container-type: inline-size;  /* declare it a query container */
}

/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: auto 1fr; }
}
```

ตอนนี้การ์ดเดียวกันจะสลับไปเป็นเลย์เอาต์แนวนอนโดยอัตโนมัติเมื่อใดก็ตามที่ *container ของมัน* มีความกว้าง ≥400px ไม่ว่าจะเป็นเพราะหน้าจอใหญ่หรือเพราะมันอยู่ในคอลัมน์ที่กว้าง component จึงกลายเป็น **อิสระจากบริบทและนำกลับมาใช้ใหม่ได้** อย่างแท้จริง

## ทั้งสองส่งเสริมซึ่งกันและกัน

- **Media query** — เลย์เอาต์ระดับหน้า, breakpoint ระดับโกลบอล, การตั้งค่าของผู้ใช้ (โหมดมืด, การลดการเคลื่อนไหว)
- **Container query** — การ responsive ระดับ component สำหรับ component ที่นำกลับมาใช้ใหม่ได้

## ทำไมจึงสำคัญ

Mobile-first ช่วยให้ CSS แบบ responsive กระชับและดูแลรักษาได้ง่าย

Container query เป็นความก้าวหน้าครั้งสำคัญ มันช่วยให้ component ตอบสนองต่อพื้นที่ที่ *ตัวมันเอง* มีอยู่ได้ ซึ่งเป็นสิ่งที่คุณต้องการพอดีในสถาปัตยกรรมแบบ component (design system, การ์ด/วิดเจ็ตที่นำกลับมาใช้ใหม่ได้) ที่ component เดียวกันถูกนำไปวางในหลาย ๆ บริบท