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

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

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