Responsive Website Design

Responsive Website Design RWD Media Queries Flexbox Grid Mobile First Breakpoint Viewport Fluid Layout Testing

Breakpoint	Device	Width	Layout
Mobile	iPhone Android	< 768px	1 Column Stack
Tablet	iPad	768-1024px	2 Columns
Desktop	Laptop PC	1024-1440px	3+ Columns Sidebar
Large	Full HD 4K	> 1440px	Max-width Container

CSS Implementation

/* === Responsive CSS - Mobile First === */

/* Base: Mobile (< 768px) */
/* * { box-sizing: border-box; margin: 0; padding: 0; } */
/* html { font-size: 16px; } */
/* body { font-family: 'Noto Sans Thai', sans-serif; line-height: 1.6; } */
/*  */
/* .container { */
/*   width: 100%; */
/*   max-width: 1200px; */
/*   margin: 0 auto; */
/*   padding: 0 16px; */
/* } */
/*  */
/* /* Navigation */ */
/* .nav { */
/*   display: flex; */
/*   flex-direction: column; /* Stack on mobile */ */
/*   gap: 8px; */
/* } */
/*  */
/* /* Card Grid - 1 column on mobile */ */
/* .card-grid { */
/*   display: grid; */
/*   grid-template-columns: 1fr; */
/*   gap: 16px; */
/* } */
/*  */
/* /* Responsive Image */ */
/* img { max-width: 100%; height: auto; } */
/*  */
/* /* Tablet (≥ 768px) */ */
/* @media (min-width: 768px) { */
/*   .nav { flex-direction: row; justify-content: space-between; } */
/*   .card-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } */
/*   .container { padding: 0 24px; } */
/* } */
/*  */
/* /* Desktop (≥ 1024px) */ */
/* @media (min-width: 1024px) { */
/*   .card-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } */
/*   .sidebar-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; } */
/* } */
/*  */
/* /* Large (≥ 1440px) */ */
/* @media (min-width: 1440px) { */
/*   .container { max-width: 1400px; } */
/*   .card-grid { grid-template-columns: repeat(4, 1fr); } */
/* } */

from dataclasses import dataclass

@dataclass
class Breakpoint:
    name: str
    min_width: str
    columns: str
    padding: str
    font_size: str

breakpoints = [
    Breakpoint("Mobile (Base)",
        "0px (Base CSS)",
        "1 Column (Stack)",
        "16px",
        "16px (1rem)"),
    Breakpoint("Tablet",
        "768px (min-width)",
        "2 Columns (Grid)",
        "24px",
        "16px (1rem)"),
    Breakpoint("Desktop",
        "1024px (min-width)",
        "3 Columns + Sidebar",
        "32px",
        "16px (1rem)"),
    Breakpoint("Large Desktop",
        "1440px (min-width)",
        "4 Columns + Max-width Container",
        "32px",
        "18px (1.125rem)"),
]

print("=== Breakpoints ===")
for b in breakpoints:
    print(f"  [{b.name}] min-width: {b.min_width}")
    print(f"    Columns: {b.columns}")
    print(f"    Padding: {b.padding} | Font: {b.font_size}")

Flexbox & Grid

/* === Flexbox & Grid Patterns === */

/* Flexbox: Navigation */
/* .nav { */
/*   display: flex; */
/*   justify-content: space-between; */
/*   align-items: center; */
/*   flex-wrap: wrap; */
/*   gap: 16px; */
/* } */
/*  */
/* /* Flexbox: Card Row */ */
/* .card-row { */
/*   display: flex; */
/*   gap: 16px; */
/*   overflow-x: auto;  /* Horizontal scroll on mobile */ */
/*   scroll-snap-type: x mandatory; */
/* } */
/* .card-row > * { */
/*   flex: 0 0 280px;  /* Fixed width cards */ */
/*   scroll-snap-align: start; */
/* } */
/*  */
/* /* Grid: Auto-responsive (No Media Query needed!) */ */
/* .auto-grid { */
/*   display: grid; */
/*   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
/*   gap: 24px; */
/* } */
/*  */
/* /* Grid: Page Layout */ */
/* .page-layout { */
/*   display: grid; */
/*   grid-template-areas: */
/*     "header header" */
/*     "sidebar content" */
/*     "footer footer"; */
/*   grid-template-columns: 250px 1fr; */
/*   gap: 24px; */
/* } */
/* @media (max-width: 768px) { */
/*   .page-layout { */
/*     grid-template-areas: "header" "content" "sidebar" "footer"; */
/*     grid-template-columns: 1fr; */
/*   } */
/* } */

@dataclass
class LayoutPattern:
    pattern: str
    css_method: str
    responsive: str
    use_case: str

layouts = [
    LayoutPattern("Auto-responsive Grid",
        "grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))",
        "อัตโนมัติ ไม่ต้องใช้ Media Query",
        "Card Grid Gallery Product List"),
    LayoutPattern("Sidebar Layout",
        "grid-template-columns: 250px 1fr + grid-template-areas",
        "Media Query เปลี่ยนเป็น 1 Column บน Mobile",
        "Blog Dashboard Admin Panel"),
    LayoutPattern("Navigation Bar",
        "display: flex; justify-content: space-between",
        "Media Query เปลี่ยนเป็น Hamburger Menu บน Mobile",
        "Header Navigation Top Bar"),
    LayoutPattern("Horizontal Scroll Cards",
        "display: flex; overflow-x: auto; scroll-snap-type",
        "Mobile Scroll Horizontal Desktop Grid/Wrap",
        "Product Carousel Story Cards"),
    LayoutPattern("Holy Grail Layout",
        "grid-template-areas: header sidebar content footer",
        "Media Query Stack ตามลำดับบน Mobile",
        "Classic Website Layout Header+Sidebar+Content+Footer"),
]

print("=== Layout Patterns ===")
for l in layouts:
    print(f"  [{l.pattern}] {l.css_method}")
    print(f"    Responsive: {l.responsive}")
    print(f"    Use: {l.use_case}")

Testing Checklist

# === Responsive Testing Checklist ===

@dataclass
class TestItem:
    category: str
    check: str
    tool: str
    pass_criteria: str

checklist = [
    TestItem("Layout",
        "ทุกหน้าแสดงผลดีบน 320px-1920px",
        "Chrome DevTools Device Toolbar",
        "ไม่มี Horizontal Scroll ไม่มี Overflow Content ครบ"),
    TestItem("Images",
        "รูปภาพ Responsive ไม่เกิน Container",
        "DevTools + Lighthouse",
        "img max-width:100% srcset สำหรับ Retina"),
    TestItem("Typography",
        "Font อ่านง่ายบน Mobile",
        "Manual Testing บน Device จริง",
        "Font ≥ 16px Line-height ≥ 1.5 Contrast ≥ 4.5:1"),
    TestItem("Touch Target",
        "ปุ่มกดได้ง่ายบน Mobile",
        "Lighthouse Accessibility",
        "Touch Target ≥ 44x44px ระยะห่าง ≥ 8px"),
    TestItem("Navigation",
        "Menu ใช้งานได้บน Mobile",
        "Manual Testing",
        "Hamburger Menu ทำงาน Dropdown ไม่ล้นจอ"),
    TestItem("Performance",
        "โหลดเร็วบน Mobile 3G/4G",
        "Lighthouse + PageSpeed Insights",
        "LCP < 2.5s FID < 100ms CLS < 0.1"),
    TestItem("Form",
        "Form ใช้ง่ายบน Mobile",
        "Manual Testing บน Device จริง",
        "Input Type ถูกต้อง (email tel number) Keyboard เหมาะสม"),
]

print("=== Testing Checklist ===")
for t in checklist:
    print(f"  [{t.category}] {t.check}")
    print(f"    Tool: {t.tool}")
    print(f"    Pass: {t.pass_criteria}")

เคล็ดลับ

Mobile First: เขียน CSS สำหรับ Mobile ก่อน ใช้ min-width Media Query
auto-fit: ใช้ repeat(auto-fit, minmax(300px, 1fr)) ไม่ต้อง Media Query
rem: ใช้ rem แทน px สำหรับ Font Size ปรับขนาดง่าย
Viewport: อย่าลืม meta viewport ทุกหน้า
Test: ทดสอบบน Device จริง ไม่ใช่แค่ DevTools

การนำความรู้ไปประยุกต์ใช้งานจริง

แหล่งเรียนรู้ที่แนะนำ ได้แก่ Official Documentation ที่อัพเดทล่าสุดเสมอ Online Course จาก Coursera Udemy edX ช่อง YouTube คุณภาพทั้งไทยและอังกฤษ และ Community อย่าง Discord Reddit Stack Overflow ที่ช่วยแลกเปลี่ยนประสบการณ์กับนักพัฒนาทั่วโลก

เนื้อหาเกี่ยวข้อง — ดูเพิ่มเติมเรื่อง พรบคอมพิวเตอร์