Responsive Design

หัวข้อนี้คืออะไร

mobile-first approach คือแนวคิดที่บอกว่า "เริ่มเขียน CSS สำหรับมือถือก่อน แล้วค่อยเพิ่มสำหรับจอใหญ่" แทนที่จะเขียน CSS สำหรับ desktop ก่อนแล้วค่อย "ลด" ให้ใช้ได้บนมือถือ — mobile-first ทำกลับกัน: 1. เขียน CSS พื้นฐาน สำหรับหน้าจอเล็ก (มือถือ) 2. ใช้ @media (min-width: ...) เพื่อ "เพิ่ม" หรือ "ขยาย" สำหรับหน้าจอที่ใหญ่ขึ้น มันไม่ใช่แค่เทคนิคการเขียน media query — มันคือวิธีคิดว่าจะเริ่มต้นจากจุดไหน

/* ✅ mobile-first: เริ่มจากมือถือ แล้วเพิ่มสำหรับจอใหญ่ */

/* CSS พื้นฐาน — ใช้ได้บนทุกหน้าจอ รวมถึงมือถือ */
.card {
  padding: 16px;
  font-size: 15px;
}

/* เพิ่มเติมเมื่อหน้าจอกว้างขึ้น (tablet+) */
@media (min-width: 640px) {
  .card {
    padding: 32px;
    font-size: 18px;
  }
}

ทำไมหัวข้อนี้สำคัญ

ในปัจจุบัน ผู้ใช้อินเทอร์เน็ตมากกว่า 60% เข้าถึงเว็บจากมือถือ การออกแบบที่เริ่มจาก desktop ก่อนจึงเริ่มจากจุดที่ผู้ใช้ส่วนน้อยอยู่ ทำไม mobile-first ถึงช่วยได้: โค้ดน้อยกว่า — CSS สำหรับมือถือมักเรียบง่ายกว่า เมื่อเริ่มจากที่นี่ จะมีแค่ "เพิ่ม" ไม่ค่อยต้อง "ลบ" โฟกัสเนื้อหาหลัก — เมื่อพื้นที่จำกัด คุณถูกบังคับให้ตัดสินว่าอะไรสำคัญที่สุด ประสิทธิภาพดีกว่า — browser โหลด CSS พื้นฐานก่อน media queries เพิ่มเฉพาะเมื่อจำเป็น เป็น best practice ปัจจุบัน — frameworks เช่น Tailwind CSS ใช้แนวคิดนี้เป็นพื้นฐาน

ตัวอย่างจากชีวิตจริง

ลองนึกถึงแอปที่ใช้ทุกวัน: LINE — หน้าแชทบนมือถือเรียบง่ายมาก ข้อความ + รูปภาพ บน desktop จึงมีพื้นที่เพิ่มเติมสำหรับ sidebar และฟีเจอร์มากขึ้น Lazada / Shopee — บนมือถือแสดง 2 สินค้าต่อแถว บน desktop แสดง 4-5 สินค้าต่อแถว layout เพิ่มขึ้นเมื่อมีพื้นที่มากขึ้น GitHub — บนมือถือซ่อน sidebar แสดงเฉพาะ code บน desktop เปิด file tree ข้างซ้าย ทั้งหมดนี้เริ่มจากคำถามเดียวกัน: "บนมือถือ ผู้ใช้ต้องการอะไรที่สุด?" แล้วค่อยเพิ่มสำหรับหน้าจอใหญ่

แนวคิดหลักที่ต้องเข้าใจ

กุญแจสำคัญอยู่ที่ CSS cascade — rules ที่เขียนทีหลังจะ override rules ก่อนหน้า mobile-first ใช้หลักนี้ให้เป็นประโยชน์: - CSS พื้นฐาน = style สำหรับมือถือ (จอเล็ก) - @media (min-width: ...) = override เฉพาะเมื่อจอกว้างขึ้น ลองปรับขนาด preview ด้านล่าง — สังเกตว่า layout เปลี่ยนตาม min-width:

การทำงานทีละขั้นตอน

วิธีคิดแบบ mobile-first เมื่อเริ่มเขียน CSS:

• 1. คิดถึงหน้าจอเล็กสุดก่อน — ถามตัวเองว่าบนมือถือ ผู้ใช้ต้องการเห็นอะไร เนื้อหาหลักคืออะไร ไม่มีที่สำหรับ sidebar หรือ decoration ที่ไม่จำเป็น
• 2. เขียน CSS พื้นฐานสำหรับมือถือ — layout แนวตั้ง (column), font-size เหมาะกับมือถือ, padding ไม่มากเกิน ไม่ต้องมี media query ในขั้นนี้
• 3. ขยาย preview หรือ browser แล้วสังเกต — ลองดูว่า layout เริ่มดูไม่ดีตอนไหน นั่นคือจุดที่ควรเพิ่ม breakpoint
• 4. เพิ่ม @media (min-width: Xpx) — ใส่เฉพาะ CSS ที่ต้องการเปลี่ยน ไม่ต้องเขียนใหม่ทั้งหมด เพราะ CSS พื้นฐานยังคงทำงานอยู่
• 5. ทำซ้ำสำหรับ breakpoint ถัดไป — เช่น sm (640px), md (768px), lg (1024px) เพิ่มตามที่ layout ต้องการจริง ไม่ใช่ตาม device spec ตายตัว

ตัวอย่างที่ 1 — Typography แบบ mobile-first

เริ่มจาก font-size และ padding ที่เหมาะกับมือถือ แล้วขยายสำหรับจอใหญ่ขึ้น — ลองปรับขนาด preview:

ตัวอย่างที่ 2 — Layout 1 คอลัมน์ → 2 คอลัมน์

เริ่มจาก 1 คอลัมน์สำหรับมือถือ แล้วขยายเป็น 2 คอลัมน์เมื่อมีพื้นที่เพียงพอ — ลองปรับขนาด preview:

ตัวอย่างที่ 3 — เปรียบเทียบ mobile-first กับ desktop-first

โค้ดทั้งสองแบบให้ผลลัพธ์เหมือนกัน — แต่ mobile-first สั้นกว่าและ override น้อยกว่า:

/* ❌ Desktop-First — เริ่มจาก desktop แล้วลดสำหรับมือถือ */
.nav {
  display: flex;
  flex-direction: row;   /* desktop: แนวนอน */
  gap: 24px;
  padding: 16px 32px;
  font-size: 16px;
}

/* ต้อง override ทุกอย่างสำหรับมือถือ */
@media (max-width: 767px) {
  .nav {
    flex-direction: column;  /* มือถือ: แนวตั้ง */
    gap: 8px;
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* ✅ Mobile-First — เริ่มจากมือถือ แล้วขยายสำหรับ desktop */
.nav {
  display: flex;
  flex-direction: column;  /* มือถือ: แนวตั้ง */
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
}

/* เพิ่มเฉพาะสิ่งที่เปลี่ยนสำหรับ desktop */
@media (min-width: 768px) {
  .nav {
    flex-direction: row;   /* desktop: แนวนอน */
    gap: 24px;
    padding: 16px 32px;
    font-size: 16px;
  }
}

จุดที่ผู้เริ่มต้นมักสับสน

• mobile-first ≠ ออกแบบสำหรับมือถืออย่างเดียว — มันหมายถึง 'เริ่มจากมือถือ' แต่ desktop ยังคงทำงานได้ปกติผ่าน media queries ที่เพิ่มเข้ามา
• ใช้ min-width และ max-width ปนกัน — ถ้าเลือกแนวทาง mobile-first ให้ใช้ min-width ทั้งหมด การปนกันทำให้โค้ดสับสนและ debug ยาก
• คิดว่าต้องเขียน CSS ทั้งหมดใหม่ใน media query — ไม่ใช่ ใส่เฉพาะ properties ที่เปลี่ยนจาก mobile เท่านั้น CSS พื้นฐานยังคงทำงาน
• เขียน mobile style ไว้ใน @media (max-width: 480px) — นี่คือ desktop-first ไม่ใช่ mobile-first เพราะ CSS พื้นฐานยังเป็น desktop อยู่

เปรียบเทียบ Mobile-first กับ Desktop-first

สรุปท้ายบทแบบจำง่าย

mobile-first = "CSS พื้นฐาน = มือถือ, min-width = ขยายขึ้น" สูตรจำง่าย: เขียน CSS ปกติ → ใส่ @media (min-width: Xpx) { /* เพิ่มสำหรับจอใหญ่ */ }

• CSS พื้นฐานต้องเหมาะกับมือถือ — ไม่มี max-width สำหรับ mobile ใน mobile-first ที่แท้จริง
• ใช้ min-width เท่านั้น — ขยายขึ้นไปเรื่อยๆ ไม่ใช่ลดลงมา
• เพิ่มเฉพาะสิ่งที่เปลี่ยน — media query ไม่ต้องเขียน CSS ทั้งหมด ใส่แค่ properties ที่ต่างจาก mobile

Lab 1 — เขียน style มือถือก่อน

โจทย์: .profile เป็น card โปรไฟล์ที่ยังไม่มี style เขียน CSS พื้นฐานสำหรับมือถือให้: - .profile มี padding อย่างน้อย 16px - .profile มี font-size สำหรับข้อความ (ไม่เกิน 16px) - ห้ามใช้ @media (max-width: ...) — เพราะนั่นคือ desktop-first

Lab 2 — เพิ่ม media query min-width สำหรับ tablet และ desktop

โจทย์: .card-list มี CSS สำหรับมือถือแล้ว (1 คอลัมน์) เพิ่ม media query ที่ขยาย layout: - เมื่อกว้างอย่างน้อย 600px → 2 คอลัมน์ - เมื่อกว้างอย่างน้อย 900px → 3 คอลัมน์

Lab 3 — แก้โค้ด desktop-first ให้เป็น mobile-first

โจทย์: โค้ดด้านล่างเขียนแบบ desktop-first — .nav แสดงเป็นแนวนอนเป็นค่าเริ่มต้น แล้วใช้ max-width สำหรับมือถือ ปรับให้เป็น mobile-first: 1. CSS พื้นฐานของ .nav ต้องเป็นแนวตั้ง (column) — สำหรับมือถือ 2. เปลี่ยน @media (max-width: 767px) เป็น @media (min-width: 768px) — สำหรับ desktop 3. ย้าย flex-direction: row ไปอยู่ใน @media (min-width: 768px) แทน