Responsive Website Design — ออกแบบเว็บไซต์

Responsive Website Design

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

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}")

เคล็ดลับ

• 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