responsive website design

Responsive Website Design

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

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 ที่ช่วยแลกเปลี่ยนประสบการณ์กับนักพัฒนาทั่วโลก

สรุป

Responsive Website Design RWD Mobile First Media Query Flexbox Grid Breakpoint auto-fit Viewport Testing Lighthouse Performance