กลับไปหน้า Design
ทริคDesign

Responsive Design

ออกแบบให้ใช้ได้ทั้งมือถือและจอใหญ่ พร้อมจุด breakpoint ที่ควรคิดถึง

เริ่มอ่านตรงนี้ก่อน

อธิบายแบบง่าย

Responsive Design คือเรื่องที่ช่วยให้เราใช้ทำหน้าจอให้อ่านง่าย ใช้ง่าย และไม่สับสนได้ถูกทางขึ้น

ระดับ

เหมาะกับคนที่เริ่มลงมือทำแล้ว

ใช้เมื่อไหร่

หน้าจอพังหรือล้นเมื่อเปิดบนมือถือ

อ่านแล้วทำอะไรต่อ

บนมือถือการ์ดเรียงคอลัมน์เดียว แท็บเล็ตสองคอลัมน์ เดสก์ท็อปสามคอลัมน์ ใช้ media query เดียวคุมทั้งหมด ผู้ใช้เปิดจอไหนก็อ่านได้สบาย

เห็นภาพ: ทริคนี้เป็นยังไง

ก่อน — ความกว้างพิกเซลตายตัว ล้นบนมือถือ
.grid { display: flex; }
.card { width: 320px; }     /* คงที่ทุกจอ */
/* จอกว้าง 360px ใส่ได้ใบเดียวแต่ล้นขอบ เลื่อนซ้ายขวา */
หลัง — mobile-first เพิ่มคอลัมน์ตาม breakpoint
.grid { grid-template-columns: 1fr; }        /* จอเล็ก */

@media (min-width: 768px) {  /* แท็บเล็ต */
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { /* เดสก์ท็อป */
  .grid { grid-template-columns: repeat(3, 1fr); }
}
ตั้งความกว้างตายตัว เทียบกับ mobile-first ที่ยืดตามจอ

ใช้ตอนไหน?

  • หน้าจอพังหรือล้นเมื่อเปิดบนมือถือ
  • ตารางกว้างเกินจอเล็ก เลื่อนซ้ายขวาลำบาก
  • ทีมเปิดใช้งานทั้งบนมือถือ แท็บเล็ต และคอม

ความหมาย

ดีไซน์ responsive คือการออกแบบหน้าเดียวให้ปรับตัวตามขนาดจอได้ ตั้งแต่มือถือถึงเดสก์ท็อป โดยใช้ breakpoint (จุดความกว้างที่เลย์เอาต์เปลี่ยน) เปลี่ยนจำนวนคอลัมน์ ขนาดตัวอักษร และการแสดง/ซ่อนองค์ประกอบ แนวคิด mobile-first คือออกแบบจากจอเล็กก่อนแล้วค่อยขยาย

เริ่มจากจอเล็กก่อน (mobile-first)

ออกแบบสำหรับจอแคบก่อน แล้วใช้ media query ขยายเมื่อจอกว้างขึ้น เปลี่ยนจำนวนคอลัมน์ตาม breakpoint และจัดการตารางบนมือถือด้วยการเลื่อนหรือยุบเป็นการ์ด

/* mobile-first: ค่าเริ่มต้น = จอเล็ก */
.grid { grid-template-columns: 1fr; }

@media (min-width: 768px) {  /* แท็บเล็ต */
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) { /* เดสก์ท็อป */
  .grid { grid-template-columns: repeat(3, 1fr); }
}

ตัวอย่างการใช้

รายการการ์ดที่ปรับตามจอ

บนมือถือการ์ดเรียงคอลัมน์เดียว แท็บเล็ตสองคอลัมน์ เดสก์ท็อปสามคอลัมน์ ใช้ media query เดียวคุมทั้งหมด ผู้ใช้เปิดจอไหนก็อ่านได้สบาย