Responsive Design

ใน Figma คุณสร้าง Artboard แยกกัน — หนึ่งสำหรับ Desktop (1440 px), หนึ่งสำหรับ Tablet (768 px), หนึ่งสำหรับ Mobile (375 px) นั่นคือสิ่งที่ Responsive Design ทำบนเว็บ เพียงแต่ Browser จะสลับให้โดยอัตโนมัติ

เว็บไซต์ Responsive คือ HTML และ CSS ชุดเดียวที่ ปรับรูปแบบ ให้เข้ากับทุกหน้าจอ หน้าเดียวกันที่แสดงผลเต็มจอ 27 นิ้ว ก็พอดีกับโทรศัพท์ขนาด 5 นิ้วด้วย ไม่ต้องซูมขยาย ไม่ต้องเลื่อนซ้าย-ขวา ไม่มีข้อความถูกตัดขาด

ทำไมต้องสนใจ?

ปัจจุบันมากกว่าครึ่งของ Traffic บนเว็บมาจากโทรศัพท์มือถือ ถ้า Design ของคุณดูดีเฉพาะที่ 1440 px คุณกำลังทำให้ผู้ใช้ส่วนใหญ่ได้รับประสบการณ์ที่แย่ Responsive Design จึงไม่ใช่ตัวเลือก แต่เป็นมาตรฐานพื้นฐาน

เครื่องมือหลักสามอย่าง

บทเรียนถัดไปจะสอนแต่ละอย่างโดยละเอียด นี่คือภาพรวมก่อน:

เครื่องมือ	หน้าที่	Figma Analogy
Relative Units (`%`, `rem`, `vw`)	ขนาดที่ปรับตามบริบท	Constraints (fill, hug, fixed)
Media Queries (`@media`)	ใช้ CSS ต่างกันตามความกว้างหน้าจอ	แสดง/ซ่อน Layer ตาม Artboard
Mobile-First	เริ่มออกแบบจากหน้าจอเล็กก่อน	ออกแบบ Mobile Artboard ก่อน

Layout แบบ Fluid ครั้งแรก

กรอบ Preview ด้านล่างคือหน้าจอของคุณ ลอง ย่อหน้าต่าง Browser ให้แคบลง (หรือดูบนโทรศัพท์) แล้วสังเกตว่ากล่องสีจะปรับตัว — เริ่มแรกอยู่เคียงกัน แล้วเมื่อพื้นที่แคบลงจะเรียงซ้อนกันในแนวตั้งโดยอัตโนมัติ

<div class="row">
  <div class="box box--a">Header / Hero</div>
  <div class="box box--b">Sidebar</div>
  <div class="box box--c">Main content</div>
</div>

สังเกต flex: 1 1 200px — บรรทัดนี้บอกว่า “แต่ละกล่องสามารถขยายและย่อได้ แต่ต้องไม่แคบกว่า 200 px” เมื่อกรอบแคบเกินไปจนไม่สามารถวางสองกล่องเคียงกันได้ กล่องจะขึ้นบรรทัดใหม่โดยอัตโนมัติ — โดยไม่ต้องเขียน Media Query เลย