reveal.js

# Media Query และหลักการ Responsive Design

หัวข้อ 6 · CSS แผ่นแบบต่อเรียงและการออกแบบเว็บ

---

## แนวคิดหลัก

Responsive Design คือการออกแบบให้หน้าเว็บใช้งานได้ดีบนหน้าจอหลายขนาด ตั้งแต่มือถือ แท็บเล็ต ไปจนถึง desktop โดยใช้ viewport, media query, flexible layout, fluid typography และ responsive images

---

## Viewport Meta Tag

ควรใส่ใน `<head>` ของ HTML

```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```

`width=device-width` ทำให้ viewport กว้างเท่าหน้าจออุปกรณ์จริง ช่วยให้ responsive CSS ทำงานถูกต้อง

---

## Media Query

ใช้กำหนด style ตามเงื่อนไข เช่น ความกว้างหน้าจอ

```css
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
}
```

ตัวอย่าง breakpoint พื้นฐาน:

1. 480px: Mobile
2. 768px: Tablet
3. 1024px: Desktop

---

## Mobile First

Mobile First คือเขียน CSS สำหรับหน้าจอเล็กก่อน แล้วค่อยเพิ่ม style สำหรับจอใหญ่ด้วย `min-width`

```css
.grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
```

ข้อดี:

1. เหมาะกับผู้ใช้มือถือจำนวนมาก
2. CSS เริ่มจากแบบเรียบง่าย
3. ช่วยคิดเรื่อง content priority

---

## Desktop First

Desktop First คือเขียน CSS สำหรับจอใหญ่ก่อน แล้วปรับลงจอเล็กด้วย `max-width`

```css
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
```

ข้อดีคือเหมาะกับระบบที่ผู้ใช้หลักอยู่บน desktop แต่ต้องระวังไม่ให้ mobile กลายเป็นสิ่งที่แก้ทีหลังแบบรีบ ๆ

---

## Fluid Typography ด้วย `clamp()`

`clamp(min, preferred, max)` ช่วยให้ขนาดตัวอักษรยืดหยุ่นตาม viewport แต่ไม่เล็กหรือใหญ่เกินไป

```css
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}
```

หมายถึงเล็กสุด 2rem ค่าที่ต้องการ 5vw และใหญ่สุด 4rem

---

## Responsive Images

### `srcset` และ `sizes`

```html
<img
  src="cover-800.jpg"
  srcset="cover-400.jpg 400w, cover-800.jpg 800w, cover-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="ภาพหน้าปกบทเรียน">
```

Browser จะเลือกรูปที่เหมาะกับขนาดจอและความละเอียด

### `<picture>`

ใช้เมื่ออยากเปลี่ยนไฟล์ภาพตามเงื่อนไข เช่น mobile ใช้ภาพ crop อีกแบบ

```html
<picture>
  <source media="(max-width: 600px)" srcset="cover-mobile.jpg">
  <source media="(min-width: 601px)" srcset="cover-desktop.jpg">
  <img src="cover-desktop.jpg" alt="ภาพหน้าปกบทเรียน">
</picture>
```

---

## กิจกรรม

ปรับหน้า Course Landing Page ให้รองรับมือถือ โดยใช้ Mobile First, `clamp()` สำหรับ heading และ responsive image ด้วย `srcset`

---

## แบบทดสอบหลังเรียน

1. Viewport meta tag สำคัญอย่างไร
2. `max-width` และ `min-width` ใน media query ใช้ต่างกันอย่างไร
3. Mobile First มีข้อดีอะไร
4. `clamp()` ช่วย typography อย่างไร
5. `srcset` และ `<picture>` ต่างกันอย่างไร

---

## จบบทเรียน

<a href="/web-programming/03-css-design/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>