CSS Responsive Design - ตั้งแต่พื้นฐานถึงซ้บซ้อน

1️⃣ Viewport Meta Tag (พื้นฐาน)

📝 HTML

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" 
    content="width=device-width, 
             initial-scale=1.0" />
  <title>Page Title</title>
</head>

🎨 CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-size: 16px;
  line-height: 1.6;
}

📖 คำอธิบาย

Viewport Meta Tag บอก Browser ให้ใช้ความกว้างของ device และ set scaling ให้เหมาะสม

📱 ตรวจสอบหน้าจออุปกรณ์ของคุณ

💡 ข้อสังเกต: ต้องมี viewport meta tag ในทุก responsive page

2️⃣ Fluid Typography

📝 HTML

<h2>Responsive Heading</h2>
<p>This text scales with 
the viewport</p>

🎨 CSS

h2 {
  font-size: clamp(
    1.5rem,   /* minimum */
    5vw,      /* preferred */
    2.5rem    /* maximum */
  );
}

p {
  font-size: clamp(
    1rem,
    2vw,
    1.25rem
  );
}

📖 คำอธิบาย

Fluid Typography ใช้ clamp() เพื่อให้ขนาดตัวอักษรปรับตัวเองตามขนาดหน้าจออัตโนมัติ

Responsive Heading

ลองปรับขนาดหน้าต่างเบราว์เซอร์ สักษรจะปรับขนาดโดยอัตโนมัติ

💡 ข้อสังเกต: ไม่จำเป็นต้องใช้ media queries สำหรับ typography

3️⃣ Media Queries (พื้นฐาน)

📝 HTML

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>

🎨 CSS

.box {
  flex: 1;
  min-width: 150px;
  padding: 20px;
}

@media (max-width: 768px) {
  .box {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (max-width: 480px) {
  .box {
    flex: 1 1 100%;
  }
}

📖 คำอธิบาย

Media Queries ใช้ @media เพื่อเปลี่ยนสไตล์ตามขนาดหน้าจอ

Box 1

Box 2

Box 3

Box 4

💡 ข้อสังเกต: ลองปรับขนาดหน้าต่าง Box จะจัดเรียงใหม่ตามจำนวนคอลัมน์

4️⃣ Mobile-First Approach

📝 HTML

<div class="mobile-first-demo">
  <div>Mobile Layout</div>
  <div>Stack First</div>
  <div>Then Expand</div>
</div>

🎨 CSS

/* Mobile First - Default */
.mobile-first-demo {
  display: block;
  padding: 20px;
}

.mobile-first-demo > div {
  margin-bottom: 15px;
}

/* Desktop */
@media (min-width: 768px) {
  .mobile-first-demo {
    display: flex;
    gap: 20px;
  }

  .mobile-first-demo > div {
    flex: 1;
  }
}

📖 คำอธิบาย

Mobile-First ออกแบบสำหรับ mobile ก่อน แล้วจึง expand ขึ้นไปบน desktop

📱 Mobile

📋 Layout

🚀 First

💡 ข้อสังเกต: เขียน CSS base สำหรับ mobile ก่อน ใช้ min-width media queries เพื่อ expand

5️⃣ Responsive Images

📝 HTML

<img 
  src="image.jpg" 
  alt="Responsive Image"
  style="max-width: 100%; 
         height: auto;"
/>

<picture>
  <source media="(max-width: 480px)"
    srcset="image-sm.jpg">
  <source media="(max-width: 768px)"
    srcset="image-md.jpg">
  <img src="image-lg.jpg" alt="...">
</picture>

🎨 CSS

img {
  max-width: 100%;
  height: auto;
  display: block;
}

picture {
  display: block;
}

picture img {
  width: 100%;
  height: auto;
}

📖 คำอธิบาย

Responsive Images ใช้ max-width 100% และ height auto เพื่อ scale ตามขนาด container

💡 ข้อสังเกต: ใช้ picture element สำหรับให้ browser เลือกภาพที่เหมาะสม

6️⃣ Responsive Grid Layout

📝 HTML

<div class="responsive-grid">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

🎨 CSS

.responsive-grid {
  display: grid;
  grid-template-columns: 
    repeat(auto-fit, 
      minmax(200px, 1fr)
    );
  gap: 20px;
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

📖 คำอธิบาย

Responsive Grid ใช้ auto-fit และ minmax เพื่อปรับจำนวนคอลัมน์อัตโนมัติ

🎨

Card 1

Responsive content

💻

Card 2

Responsive content

📱

Card 3

Responsive content

⚙️

Card 4

Responsive content

💡 ข้อสังเกต: ลองปรับขนาดหน้าต่าง จำนวน card ต่อ row จะเปลี่ยนอัตโนมัติ

7️⃣ Advanced: Container Queries

📝 HTML

<div class="container-item">
  Container Item 1
</div>
<div class="container-item">
  Container Item 2
</div>
<div class="container-item">
  Container Item 3
</div>

🎨 CSS

.container-query-demo {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.container-item {
  flex: 1;
  min-width: 200px;
}

@media (max-width: 500px) {
  .container-item {
    flex: 1 1 100%;
  }
}

📖 คำอธิบาย

Container Queries อนาคตของ CSS ที่ให้ styling ตาม container size ไม่ใช่ viewport

Item 1

Item 2

Item 3

💡 ข้อสังเกต: Browser support ยังไม่ครบถ้วน ปัจจุบันใช้ media queries ได้

8️⃣ Advanced: Flexbox Responsive

📝 HTML

<div class="flex-container">
  <div class="flex-item">Header</div>
  <div class="flex-item">Main</div>
  <div class="flex-item">Sidebar</div>
  <div class="flex-item">Footer</div>
</div>

🎨 CSS

.flex-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.flex-item {
  flex: 1;
  background: #667eea;
  color: white;
  padding: 20px;
  border-radius: 4px;
}

@media (min-width: 768px) {
  .flex-container {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .flex-item:nth-child(1) { flex: 1 1 100%; }
  .flex-item:nth-child(2) { flex: 2; }
  .flex-item:nth-child(3) { flex: 1; }
  .flex-item:nth-child(4) { flex: 1 1 100%; }
}

📖 คำอธิบาย

Flexbox Responsive ใช้ flex-direction และ flex-wrap ปรับแนวแกนตามขนาดจอ

📌 Header

📝 Main Content

📚 Sidebar

👣 Footer

💡 ข้อสังเกต: Flexbox ดีสำหรับ 1D layout ที่ต้องปรับแนวตามขนาด

9️⃣ Advanced: Multi-Breakpoint Design

📝 HTML

<div class="multi-breakpoint">
  <div class="multi-item">1</div>
  <div class="multi-item">2</div>
  <div class="multi-item">3</div>
  <div class="multi-item">4</div>
</div>

🎨 CSS

.multi-breakpoint {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

@media (min-width: 480px) {
  .multi-breakpoint {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .multi-breakpoint {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .multi-breakpoint {
    grid-template-columns: repeat(4, 1fr);
  }
}

📖 คำอธิบาย

Multi-Breakpoint ใช้หลาย breakpoints เพื่อ optimize layout สำหรับอุปกรณ์ต่างๆ

1

2

3

4

💡 ข้อสังเกต: ลองปรับขนาดหน้าต่างไปที่เบรกพอยต์ต่างๆ (480px, 768px, 1024px)

📊 สรุปเปรียบเทียบ Responsive Techniques

Technique	Use Cases	Browser Support	Best For
Media Queries	Breakpoint-based layouts	✅ Universal	Most responsive designs
Flexbox	1D flexible layouts	✅ Universal	Navigation, cards
CSS Grid	2D grid layouts	✅ Universal	Complex layouts
Fluid Typography	Scalable text	✅ Modern browsers	Headings, readability
Container Queries	Component-based styling	⚠️ Limited support	Future of responsive

🎯 Common Breakpoints

Device Type	Screen Width	Media Query	Example
Mobile	320px - 480px	@media (max-width: 480px)	iPhone, small phones
Tablet	481px - 768px	@media (max-width: 768px)	iPad, tablets
Desktop	769px - 1024px	@media (min-width: 768px)	Small laptops
Large Desktop	1025px+	@media (min-width: 1024px)	Large monitors

💡 เคล็ดลับและสิ่งที่ต้องจำ

1. ทำให้ Mobile First
เขียน CSS สำหรับ mobile ก่อน จากนั้นใช้ min-width media queries เพื่อ expand ไปบน desktop

2. ใช้ Relative Units
ใช้ rem, em, %, vw แทน px เพื่อให้ responsive ได้ดีขึ้น

3. ทำให้ Images Responsive
ใช้ max-width: 100% และ height: auto เพื่อให้ภาพ scale ตามขนาด container

4. ทดสอบบนอุปกรณ์จริง
ใช้ browser devtools responsive mode แต่ทดสอบบนอุปกรณ์จริงด้วย

5. ไม่ต้องจำ Breakpoints ทั้งหมด
ใช้ breakpoint ตามความเหมาะสมของ design ไม่จำเป็นต้องใช้ standard breakpoints ทั้งหมด

📱 CSS Responsive Design - ตั้งแต่พื้นฐานถึงซ้บซ้อน

1️⃣ Viewport Meta Tag (พื้นฐาน)

📖 คำอธิบาย

2️⃣ Fluid Typography

📖 คำอธิบาย

Responsive Heading

3️⃣ Media Queries (พื้นฐาน)

📖 คำอธิบาย

4️⃣ Mobile-First Approach

📖 คำอธิบาย

5️⃣ Responsive Images

📖 คำอธิบาย

6️⃣ Responsive Grid Layout

📖 คำอธิบาย

7️⃣ Advanced: Container Queries

📖 คำอธิบาย

8️⃣ Advanced: Flexbox Responsive

📖 คำอธิบาย

9️⃣ Advanced: Multi-Breakpoint Design

📖 คำอธิบาย

📊 สรุปเปรียบเทียบ Responsive Techniques

🎯 Common Breakpoints

💡 เคล็ดลับและสิ่งที่ต้องจำ