หัวข้อ 6: Media Query และหลักการ Responsive Design

แนวคิดหลัก

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

Viewport Meta Tag

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

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

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

Media Query

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

@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

.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

.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 แต่ไม่เล็กหรือใหญ่เกินไป

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

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

Responsive Images

srcset และ sizes

<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 อีกแบบ

<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> ต่างกันอย่างไร

กลับสัปดาห์ที่ 3