Responsive Design

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

breakpoint คือค่าความกว้าง (เป็น px) ที่คุณบอก browser ว่า "เมื่อหน้าจอกว้างถึงจุดนี้ ให้เปลี่ยน style" ใน CSS จะเขียนผ่าน media query:

/* breakpoint ที่ 768px */
@media (min-width: 768px) {
  .container {
    max-width: 960px;
    padding: 0 32px;
  }
}

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

ผู้ใช้เปิดเว็บจากหน้าจอหลากหลายขนาด ถ้าไม่มี breakpoint layout จะดูดีเฉพาะขนาดที่ออกแบบไว้ ขนาดอื่นอาจดูแน่น ใหญ่เกินไป หรืออ่านยาก breakpoint ช่วยให้: layout ปรับตามพื้นที่จริงที่มี — ไม่แน่นเกิน ไม่กว้างเกิน typography อ่านง่ายทุกขนาด — ไม่เล็กเกินบนมือถือ ไม่ใหญ่เกินบน desktop navigation ใช้งานได้สะดวก — ปุ่มกดได้ง่ายบนมือถือ เมนูเต็มบน desktop สิ่งสำคัญที่ต้องเข้าใจ: breakpoint ไม่ได้มีไว้เพื่อ "ตามอุปกรณ์ทุกเครื่อง" แบบตายตัว — มีไว้เพื่อตอบสนองต่อจุดที่ layout เริ่มดูไม่ดีหรือใช้งานยาก

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

ลองนึกถึงร้านกาแฟที่มีโต๊ะหลายขนาด: โต๊ะเล็ก (2 คน) — วางแก้วกาแฟกับ laptop ได้พอดี ไม่มีพื้นที่เหลือ โต๊ะกลาง (4 คน) — วางเพิ่มได้อีก เช่น หนังสือหรือถาด โต๊ะใหญ่ (8 คน) — มีพื้นที่มากจนต้องเพิ่มสิ่งของมาเติมให้ดูไม่โล่งเกินไป คุณไม่ได้ออกแบบว่า "โต๊ะขนาดนี้ต้องวางแก้วจุดนี้เสมอ" แต่ออกแบบตามพื้นที่ที่มีจริง เว็บก็เหมือนกัน: บน UI จริง — YouTube แสดง video ขนาดเล็กบนมือถือ ขยายใหญ่บน desktop Airbnb — แสดง card ที่พัก 1 ชิ้นบนมือถือ 3-4 ชิ้นบน desktop Wikipedia — ซ่อน sidebar บนมือถือ เปิดเมื่อหน้าจอกว้างพอ breakpoint คือจุดที่ layout บอกว่า "ฉันพร้อมรับพื้นที่เพิ่มแล้ว"

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

breakpoint ที่ดีอิงจาก layout ไม่ใช่ device คำถามที่ถูกต้องเมื่อกำหนด breakpoint: "layout นี้เริ่มดูไม่ดี หรือใช้งานยาก ตั้งแต่ความกว้างเท่าไหร่?" คำถามที่ผิด: "iPhone 14 Pro กว้างกี่ px? ต้องทำ breakpoint ตรงนั้น" ลองปรับขนาด preview ด้านล่าง — สังเกตว่า card เริ่ม "แน่น" หรือ "โล่งเกิน" ตอนไหน นั่นคือสัญญาณของ breakpoint:

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

วิธีกำหนด breakpoint ที่ถูกต้องสำหรับ layout ใดๆ:

• 1. เริ่มจาก CSS มือถือก่อน — เขียน base style สำหรับหน้าจอเล็กสุดก่อน ยังไม่ต้องคิดถึง breakpoint
• 2. ค่อยๆ ขยาย preview — ลากขยายหน้าต่าง browser หรือปรับ preview ให้กว้างขึ้นทีละน้อย
• 3. สังเกตว่า layout 'แตก' ตอนไหน — เมื่อ card แคบเกิน, ข้อความล้น, หรือพื้นที่ดูโล่งผิดธรรมชาติ — จุดนั้นคือ breakpoint
• 4. เพิ่ม @media (min-width: Xpx) ตรงจุดนั้น — เพิ่มเฉพาะ CSS ที่ต้องการเปลี่ยน ไม่ต้องเขียนใหม่ทั้งหมด
• 5. ทำซ้ำจนทุก breakpoint ผ่าน — ขยาย preview ต่อไป สังเกตจุดต่อไปที่ layout ต้องการปรับ

ตัวอย่างที่ 1 — Breakpoint สำหรับ container และ typography

container ที่กว้างไม่จำกัดจะอ่านยากบน desktop — breakpoint ช่วยจำกัดความกว้างและปรับ font-size ตามพื้นที่จริง:

ตัวอย่างที่ 2 — Breakpoint สำหรับ card grid

card grid เป็นกรณีที่เห็น breakpoint ชัดที่สุด — เมื่อ card แคบเกินอ่าน ถึงเวลาเพิ่มคอลัมน์:

ตัวอย่างที่ 3 — Breakpoint สำหรับ navigation

navigation คือส่วนที่ breakpoint เห็นได้ชัดมาก — เมนูแนวนอนบน desktop ต้องยุบเป็นแนวตั้งหรือซ่อนบนมือถือ:

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

• จำตัวเลข breakpoint แบบท่องโดยไม่เข้าใจเหตุผล — เช่น '768px คือ tablet เสมอ' จริงๆ แล้ว breakpoint ควรมาจาก layout ไม่ใช่ชื่ออุปกรณ์
• ใส่ breakpoint มากเกินไป — ไม่จำเป็นต้องมี breakpoint สำหรับทุก px เพิ่มเฉพาะเมื่อ layout จริงๆ ต้องการเปลี่ยน
• ลืม mobile-first — เขียน desktop style ก่อนแล้วพยายาม 'ลด' ด้วย max-width ทำให้โค้ดซับซ้อนกว่าที่ควร
• คิดว่าต้องครอบคลุมทุก device ที่มีในโลก — เป็นไปไม่ได้และไม่จำเป็น ออกแบบให้ layout ดูดีในทุกความกว้างระหว่าง breakpoints แทน

เปรียบเทียบ Content-driven กับ Device-driven breakpoints

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

breakpoint = "จุดที่ layout บอกว่าพร้อมรับพื้นที่เพิ่มแล้ว" สูตรจำง่าย: ขยาย preview → สังเกตว่า layout แตกตอนไหน → เพิ่ม @media (min-width: Xpx) ตรงนั้น

• breakpoint มาจาก layout ไม่ใช่จากชื่ออุปกรณ์ — ถามตัวเองว่า 'ดูไม่ดีตั้งแต่ความกว้างเท่าไหร่?'
• เพิ่ม breakpoint เท่าที่จำเป็น — layout ที่ดีมักมีแค่ 2-3 breakpoints พอ
• ใช้ min-width ทิศทางเดียว — เขียน CSS มือถือก่อน แล้วขยายด้วย min-width ทีละ breakpoint

Lab 1 — เพิ่ม breakpoint พื้นฐานให้ container

โจทย์: .container มี style สำหรับมือถือแล้ว เพิ่ม @media (min-width: 720px) ที่: - กำหนด max-width: 680px ให้ .container - กำหนด margin: 0 auto ให้ .container - เพิ่ม font-size: 17px ให้ .body-text

Lab 2 — เปลี่ยนจำนวนคอลัมน์ตาม breakpoint

โจทย์: .lesson-grid มี CSS มือถือ (1 คอลัมน์) แล้ว เพิ่ม breakpoint ที่เปลี่ยน grid-template-columns: - เมื่อกว้างอย่างน้อย 540px → 2 คอลัมน์ - เมื่อกว้างอย่างน้อย 860px → 3 คอลัมน์

Lab 3 — เลือก breakpoint ที่เหมาะสมให้ navigation

โจทย์: .site-nav มี style สำหรับมือถือแล้ว (แนวตั้ง, เมนูซ่อน) วิเคราะห์แล้วเพิ่ม breakpoint ที่เหมาะสม: - เมื่อกว้างอย่างน้อย 600px — แสดง .nav-links (display: flex) และ flex-direction: row ให้ .site-nav - ข้อกำหนด: .nav-links ต้องมี display: flex ใน media query