響應式設計（Responsive Web Design）

什麼是 RWD？

比喻：RWD 就像水 💧

水倒進杯子就是杯子的形狀，倒進碗就是碗的形狀。 響應式網頁會自動適應不同大小的螢幕。

Viewport Meta 標籤

<!-- 必要！沒有這行，手機會用桌面寬度顯示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media Query（媒體查詢）

/* 桌面優先（Desktop First） */
.container { width: 1200px; }

@media (max-width: 1024px) {    /* 平板以下 */
    .container { width: 100%; padding: 0 16px; }
}

@media (max-width: 768px) {     /* 手機以下 */
    .container { padding: 0 8px; }
    .sidebar { display: none; }  /* 手機隱藏側邊欄 */
}

/* 手機優先（Mobile First）— 推薦 */
.container { width: 100%; }

@media (min-width: 768px) {     /* 平板以上 */
    .container { max-width: 720px; margin: 0 auto; }
}

@media (min-width: 1024px) {    /* 桌面以上 */
    .container { max-width: 1200px; }
}

常用斷點

響應式圖片

/* 圖片不超過容器 */
img {
    max-width: 100%;
    height: auto;
}

<!-- 不同裝置用不同圖片 -->
<picture>
    <source media="(max-width: 768px)" srcset="small.jpg">
    <source media="(max-width: 1024px)" srcset="medium.jpg">
    <img src="large.jpg" alt="響應式圖片">
</picture>

響應式文字

/* 用 clamp() 自動縮放字體 */
h1 {
    font-size: clamp(24px, 5vw, 48px);
    /* 最小 24px，理想 5vw，最大 48px */
}

/* 用 vw 單位 */
.hero-text {
    font-size: 4vw;              /* 畫面寬度的 4% */
}

響應式工具

/* 響應式間距 */
.section {
    padding: clamp(16px, 4vw, 64px);
}

/* 容器查詢（Container Query）— 新功能 */
.card-container {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .card { display: flex; }
}

/* 響應式隱藏 */
.desktop-only { display: none; }
@media (min-width: 1024px) {
    .desktop-only { display: block; }
    .mobile-only { display: none; }
}

完整響應式模板

/* 全域重設 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Noto Sans TC', sans-serif; }
img { max-width: 100%; height: auto; }

/* 容器 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* 卡片格線 */
.cards {
    display: grid;
    grid-template-columns: 1fr;              /* 手機：1 欄 */
    gap: 16px;
}

@media (min-width: 768px) {
    .cards {
        grid-template-columns: repeat(2, 1fr); /* 平板：2 欄 */
    }
}

@media (min-width: 1024px) {
    .cards {
        grid-template-columns: repeat(3, 1fr); /* 桌面：3 欄 */
        gap: 24px;
    }
}

/* Navbar 響應式 */
.nav-links { display: none; }               /* 手機隱藏 */
.hamburger { display: block; }              /* 手機顯示漢堡按鈕 */

@media (min-width: 768px) {
    .nav-links { display: flex; }            /* 平板以上顯示 */
    .hamburger { display: none; }            /* 隱藏漢堡按鈕 */
}