Responsive Design (การออกแบบที่ตอบสนองต่ออุปกรณ์)

เรียนรู้เทคนิคการสร้างเว็บไซต์ที่รองรับทุกขนาดหน้าจอด้วย CSS

พื้นฐานการทำ Responsive

Viewport (วิวพอร์ต)

การตั้งค่า viewport ที่ถูกต้องเป็นสิ่งสำคัญที่สุดในการทำ Responsive Design

<!-- ต้องมี meta viewport ใน head ทุกครั้ง -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

TIP

ตรวจสอบ Viewport ผ่าน DevTools: เปิด Developer Tools (F12) > Toggle Device Toolbar (Ctrl+Shift+M)

Media Queries (มีเดีย เควียรี่)

เครื่องมือหลักในการปรับแต่งสไตล์ตามขนาดหน้าจอ

/* เริ่มต้นที่มือถือก่อน (Mobile First) */
.container {
  padding: 1rem; /* ระยะห่างขอบในสำหรับมือถือ */
}

/* แท็บเล็ต (768px ขึ้นไป) */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* เดสก์ท็อป (1024px ขึ้นไป) */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px; /* จำกัดความกว้างสูงสุด */
    margin: 0 auto; /* จัดกึ่งกลาง */
  }
}

ข้อควรระวัง

ควรใช้ Mobile First Approach เพื่อประสิทธิภาพที่ดีกว่า

เทคนิคการจัดเลย์เอาท์แบบยืดหยุ่น

Flexbox (การจัดเรียงแบบยืดหยุ่น)

.nav {
  display: flex;
  flex-wrap: wrap; /* อนุญาตให้ขึ้นบรรทัดใหม่ */
  gap: 1rem; /* ระยะห่างระหว่างไอเทม */
  justify-content: space-between; /* จัดวางไอเทม */
  align-items: center; /* จัดแนวแนวตั้ง */
}

CSS Grid (กริดแบบยืดหยุ่น)

.grid-container {
  display: grid;
  /* auto-fit + minmax() ทำให้กริดยืดหยุ่นตามขนาดหน้าจอ */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

เคล็ดลับ

• ใช้ Flexbox สำหรับ 1 มิติ (แถวหรือคอลัมน์)
• ใช้ Grid สำหรับ 2 มิติ (ทั้งแถวและคอลัมน์)

การทำงานกับตัวอักษรและรูปภาพ

Fluid Typography (ตัวอักษรที่ปรับขนาดได้)

:root {
  --text-base: 1rem; /* 16px เป็นค่าเริ่มต้น */
}

h1 {
  /* ขนาดขั้นต่ำ: 1.5rem, ขนาดอ้างอิง: 5vw, ขนาดสูงสุด: 2.5rem */
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

p {
  /* อ่านเพิ่มเติม: https://developer.mozilla.org/en-US/docs/Web/CSS/clamp */
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.6; /* ระยะห่างระหว่างบรรทัด */
}

Responsive Images (รูปภาพที่ปรับขนาดได้)

<picture>
  <!-- หน้าจอใหญ่ 1024px+ -->
  <source media="(min-width: 1024px)" srcset="large.jpg">
  <!-- แท็บเล็ต 768px-1023px -->
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <!-- มือถือ (ค่าเริ่มต้น) -->
  <img 
    src="small.jpg" 
    alt="คำอธิบายรูปภาพ" 
    style="width: 100%; height: auto;"
    loading="lazy" /* โหลดแบบขี้เกียจ */
  >
</picture>

ข้อควรระวัง

• อย่าลืมใส่ alt เสมอ
• ใช้ loading="lazy" สำหรับรูปภาพที่อยู่ด้านล่าง
• ควรบีบอัดรูปภาพก่อนอัปโหลด

Aspect Ratio (อัตราส่วนภาพ)

/* วิดีโอ 16:9 */
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #eee;
}

/* การ์ดรูปภาพ 2:3 */
.card {
  aspect-ratio: 2 / 3;
  object-fit: cover; /* ปรับรูปให้เต็มพื้นที่ */
}

เทคนิคขั้นสูง

CSS Custom Properties (ตัวแปร CSS)

:root {
  /* สีหลัก */
  --primary: #2563eb;
  --primary-dark: #1d4ed8;

  /* ธีมสว่าง (ค่าเริ่มต้น) */
  --text: #1f2937;
  --bg: #ffffff;
  --surface: #f9fafb;

  /* ระยะห่าง */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
}

/* ธีมมืด */
@media (prefers-color-scheme: dark) {
  :root {
    --text: #f3f4f6;
    --bg: #111827;
    --surface: #1f2937;
  }
}

Container Queries (คอนเทนเนอร์ เควียรี่)

/* ประกาศ container */
.card {
  container-type: inline-size; /* ใช้ inline-size สำหรับความกว้าง */
  container-name: card; /* ตั้งชื่อ container */
}

/* ใช้ @container query */
@container card (min-width: 500px) {
  .card-content {
    display: flex;
    gap: 1rem;
  }

  .card-image {
    flex: 0 0 200px; /* กำหนดขนาดรูปภาพ */
  }
}