Day 5：RWD 響應式設計 (Responsive Web Design)

2025 iThome 鐵人賽

DAY 5

Modern Web

Modern Web：從基礎、框架到前端學習系列第 5 篇

17th鐵人賽

zoeeyee

2025-09-19 00:05:42

12 瀏覽

分享至

昨天我們學了 CSS Grid，能夠建立漂亮的二維排版。
但在現實中，使用者不只會用桌機，也會用平板或手機瀏覽網站。
這時候，我們就需要 RWD 響應式設計！

什麼是 RWD？

Responsive Web Design (響應式網頁設計) 的核心精神是：
「同一份程式碼，能在不同裝置上自動調整排版與樣式。」

它的關鍵技術包含：

流動式排版 (Fluid Layout) → 使用百分比、fr、auto。
彈性圖片 (Flexible Images) → 圖片隨容器縮放。
媒體查詢 (Media Queries) → 根據螢幕大小套用不同 CSS。

Media Query 語法

@media (max-width: 768px) {
  body {
    background: lightblue;
  }
}

這段代表：當螢幕寬度小於等於 768px（通常是平板或手機），就套用這個 CSS。

範例 1：三欄變單欄

延續昨天的 Grid 排版，我們加上 RWD 設計：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>RWD Grid 範例</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
      padding: 20px;
    }
    .box {
      background: #4CAF50;
      color: white;
      padding: 20px;
      border-radius: 6px;
      text-align: center;
    }

    /* 手機版：改成單欄 */
    @media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">卡片 1</div>
    <div class="box">卡片 2</div>
    <div class="box">卡片 3</div>
  </div>
</body>
</html>

📱 在桌機會看到三欄排版，而在手機則會自動變成單欄！

範例 2：導覽列 (Navbar) 響應式

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>RWD 導覽列</title>
  <style>
    body { margin: 0; font-family: sans-serif; }

    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #2196F3;
      padding: 10px 20px;
      color: white;
    }

    .nav-links {
      display: flex;
      gap: 15px;
    }

    /* 手機版：導覽列改為直列 */
    @media (max-width: 600px) {
      .nav-links {
        flex-direction: column;
        background: #1976D2;
        padding: 10px;
      }
    }
  </style>
</head>
<body>
  <div class="navbar">
    <div class="logo">LOGO</div>
    <div class="nav-links">
      <a href="#">首頁</a>
      <a href="#">文章</a>
      <a href="#">關於</a>
    </div>
  </div>
</body>
</html>

這個例子在桌機上是水平導覽列，但在手機上會自動變成直列，更方便點擊。

最佳實踐

✅ 設計時「Mobile First」：先寫小螢幕，再漸進加大。
✅ 使用彈性單位（% / fr / auto / minmax()）。
✅ 圖片與影片加上 max-width: 100%; height: auto;，避免超出版面。
✅ 選擇幾個斷點 (breakpoints)，不要針對所有型號硬寫。

常見斷點：