แบบสอบถาม Media Queries ช่วยให้สามารถออกแบบที่ตอบสนองได้อย่างไร

Question

IT Interview Practice · Accepted Answer

**Media Queries** ใช้ CSS ตามเงื่อนไขตามลักษณะอุปกรณ์ — บ่อยครั้งที่สุดคือ **ความกว้างของ Viewport** — ซึ่งช่วยให้สไตล์ชีตหนึ่งสามารถปรับตัวให้เข้ากับโทรศัพท์ แท็บเล็ต และเดสก์ท็อป

```css
/* base styles (mobile-first) */
.container { padding: 1rem; }

/* apply only when viewport is AT LEAST 768px wide */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## Mobile-first (min-width) กับ Desktop-first (max-width)

```css
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
```

**Mobile-first** (`min-width`) มักถูกนำมาใช้อย่างมากที่สุด: คุณเขียนสไตล์พื้นฐานแบบง่ายสำหรับหน้าจอเล็ก จากนั้นค่อยเพิ่มความซับซ้อนสำหรับขนาดที่ใหญ่ขึ้น วิธีนี้มักจะสร้าง CSS ที่สะอาดและเบากว่า และสอดคล้องกับวิธีการ Reflow ของเนื้อหา

## Media Queries ที่มีประโยชน์อื่นๆ

```css
@media (max-width: 600px) { }                 /* small screens */
@media (orientation: landscape) { }            /* device orientation */
@media (prefers-color-scheme: dark) { }        /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { }    /* user dislikes animation — accessibility */
@media print { }                                /* print stylesheet */
```

`prefers-reduced-motion` และ `prefers-color-scheme` ตอบสนองต่อ *ความต้องการ* ของผู้ใช้ไม่ใช่ขนาดหน้าจอ — สำคัญสำหรับการเข้าถึงและสีธีม

## การรวมเงื่อนไข

```css
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
```

## หมายเหตุเกี่ยวกับอนาคต: Container Queries

Media Queries ตอบสนองต่อ **Viewport** แต่ **Container Queries** ใหม่ (`@container`) ตอบสนองต่อขนาดของ *องค์ประกอบพื้นที่บรรจุ* — ดีกว่าสำหรับองค์ประกอบที่สามารถนำกลับมาใช้ได้จริง พวกเขาเติมเต็ม Media Queries มากกว่าที่จะแทนที่

## เหตุใดจึงมีความสำคัญ

Media Queries เป็นรากฐานของการออกแบบที่ตอบสนอง — การปรับตัว Layout ระยะห่าง และคอลัมน์ให้เข้ากับขนาดหน้าจอ

แนวทาง Mobile-first `min-width` ช่วยให้ CSS สามารถจัดการได้ และแบบสอบถามความต้องการ (`prefers-reduced-motion`, `prefers-color-scheme`) ขยายการตอบสนองไปยังการเข้าถึงและธีมสี

Mobile-first (min-width) กับ Desktop-first (max-width)

Media Queries ที่มีประโยชน์อื่นๆ

การรวมเงื่อนไข

หมายเหตุเกี่ยวกับอนาคต: Container Queries

เหตุใดจึงมีความสำคัญ

คำถามที่เกี่ยวข้อง