過去幾天的佈局與定位課程中，我們學會了如何使用Flexbox、Grid與Position來打造網頁版面，但你有沒有注意到，我們的範例大多是固定在某個寬度（例如max-width: 600px或width: 400px）？

在現在的時代，使用者可能會用 iPhone（小螢幕）、iPad（中螢幕），或是 27吋桌上型電腦（大螢幕） 來瀏覽你的網站，如果網頁寬度是固定的，在手機上看就會出現麻煩的橫向滾動條，字體也會縮得像螞蟻一樣小。

今天，我們要進入前端開發最重要的分水嶺：響應式網頁設計（RWD，Responsive Web Design），學習如何讓網頁根據裝置螢幕大小，自動切換最舒適的幾何版面。

RWD的兩大基石

要實現完美的RWD，我們必須在HTML與CSS中分別做一件最關鍵的事情：

1. HTML 的視窗設定：Viewport Meta標籤

當瀏覽器載入網頁時，手機瀏覽器預設會把網頁當成「電腦版」來縮小渲染，為了阻止這件事，我們必須在 HTML 的<head>內加上這行解析度地圖：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width：告訴手機，網頁的寬度直接等於這台手機的螢幕寬度。
• initial-scale=1.0：預設縮放比例為100%，不放大也不縮小。

2. CSS 的幾何分流：Media Queries（媒體查詢）

這是 RWD 的靈魂，它允許我們撰寫「條件判斷式」，當螢幕寬度符合某個幾何範圍時，才啟動內部的CSS樣式。

• 斷點（Breakpoints）：改變網頁版面配置的寬度臨界點。實務上常用的斷點標準有：
  • 手機（Mobile）：< 576px
  • 平板（Tablet）：576px ~ 768px 或 992px
  • 桌機（Desktop）：> 992px 或 1200px

實作範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <!-- 啟動響應式視窗導航 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day19 RWD 響應式網頁設計</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f6fa;
            padding: 20px;
        }
        h2 {
            text-align: center;
            color: #2c3e50;
        }
        /* 商品外容器：預設為手機版樣式（單欄佈局） */
        .product-grid {
            display: grid;
            grid-template-columns: 1fr; /* 手機版：只有一欄 */
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .product-card {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            text-align: center;
            border: 1px solid #ede6e6;
        }
        .product-card .photo-box {
            height: 150px;
            background-color: #34495e;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        /* 媒體查詢媒體分流 */
        /* 當螢幕寬度大於等於 576px 時（平板裝置），切換為 2 欄 */
        @media (min-width: 576px) {
            .product-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .product-card .photo-box {
                background-color: #2ecc71; /* 換個顏色方便辨識斷點切換 */
            }
        }
        /* 當螢幕寬度大於等於 992px 時（桌上型電腦），切換為 3 欄 */
        @media (min-width: 992px) {
            .product-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .product-card .photo-box {
                background-color: #9b59b6; /* 換個顏色方便辨識斷點切換 */
            }
        }
    </style>
</head>
<body>

    <h2>響應式商品列表 (請縮放瀏覽器視窗體驗)</h2>
    <div class="product-grid">
        <div class="product-card">
            <div class="photo-box">商品圖片 1</div>
            <h3>極簡風後背包</h3>
            <p>NT$ 1,280</p>
        </div>
        <div class="product-card">
            <div class="photo-box">商品圖片 2</div>
            <h3>無線降噪耳機</h3>
            <p>NT$ 3,450</p>
        </div>
        <div class="product-card">
            <div class="photo-box">商品圖片 3</div>
            <h3>機械式人體工學鍵盤</h3>
            <p>NT$ 2,980</p>
        </div>
    </div>
</body>
</html>

表現介紹

當打開這個網頁，並嘗試手動拉寬或縮窄瀏覽器視窗時，你會看到三種不同的表現方式：

1. 窄視窗（手機）：三個卡片垂直排成一列，區塊內呈深藍色。
2. 拉寬越過 576px（平板）：卡片瞬間變成左右並排的兩欄，第三個卡片掉到第二行，且區塊內的圖片盒自動變成了綠色。
3. 繼續拉寬越過 992px（桌機）：三個卡片完美在一行內橫向並排，均分空間，且圖片盒變成了紫色。

這就是RWD的魅力，我們不需要針對手機和電腦各寫一個獨立的網站，只需要用CSS寫出幾何斷點，網頁就能完美適應所有機體。

總結

今天我們成功搞定了網頁切版最後一塊拼圖：響應式網頁設計（RWD）。透過meta視窗標籤與CSSMedia Queries的斷點幾何調配，我們開發的網頁終於具備了跨裝置的適應力。

到今天為止，鐵人賽前19天的 HTML與CSS網頁外觀骨架篇 已經正式結束。

明天（Day 20），我們即將迎來這趟鐵人賽的重大轉折點，我們要正式啟動網頁的「大腦與神經系統」，跨入前端的核心靈魂技術：JavaScript（JS），去看看如何讓原本靜態的網頁，開始擁有思考、互動與處理邏輯，明天見。