# Week 8 RWD 響應式設計實作 ## 教學目標 1. 認識什麼是 RWD（Responsive Web Design） 2. 理解 @media 語法與「斷點 (breakpoint)」概念 3. 學會針對不同螢幕尺寸（手機、平板、桌機）調整排版 4. 實際將上週的網站改造成響應式網頁 ## 一、什麼是 RWD（Responsive Web Design）？ ### 定義 RWD 是一種讓網站「能根據不同螢幕大小自動調整版面」的設計方式，目的在於： * 提供**一致的使用體驗**（桌機、平板、手機皆可用） * 提升**可用性**與**可讀性** * **減少重複開發**（同一組程式可支援多裝置） ### 為什麼要做 RWD？ | 問題 | 傳統固定版面 | 響應式設計 (RWD) | | -------- | -------- | -------- | | 手機開啟網站 | 內容超出畫面、需左右滑動 | 自動縮排、單欄顯示 | | 圖片比例 | 常被擠壓變形 | 保持原比例、寬度自動調整 | | 使用體驗 | 操作困難 | 一致、舒適的瀏覽體驗 | ## 二、@media 語法介紹 ### 基本語法格式 ``` @media (條件) { /* 當條件成立時套用的樣式 */ } ``` ### 常見條件語法 | 條件 | 說明 | 範例 | | -------- | -------- | -------- | | `(max-width: 768px)` | 當螢幕寬度 ≤ 768 px 時生效（通常代表手機） | 手機版樣式 | | `(min-width: 769px)` | 當螢幕寬度 ≥ 769 px 時生效 | 桌機／平板樣式 | | `(orientation: landscape)` | 當裝置為橫向時生效 | 改變橫式排版 | | `(min-resolution: 2dppx)` | 高解析度螢幕（Retina）專用 | 針對高 DPI 顯示器 | ### 範例 ``` /* 手機優先設計（Mobile First） */ body { font-size: 16px; } /* 平板以上尺寸（768px 以上） */ @media (min-width: 768px) { body { font-size: 18px; } } /* 桌機尺寸（1024px 以上） */ @media (min-width: 1024px) { body { font-size: 20px; } } ``` ## 三、斷點（Breakpoints）設計原則 | 裝置 | 寬度範圍 | 常見設計重點 | | -------- | -------- | -------- | | 手機 | ≤ 576 px | 單欄設計、字體放大、按鈕可點、圖片縮放 | | 平板 | 577 ~ 992 px | 兩欄設計、導覽列縮短或摺疊 | | 桌機 | ≥ 993 px | 多欄設計、完整導覽列、較寬版面內容 | ### 設計策略： * 採用「Mobile First」思維：先為手機設計，再逐步擴增至大螢幕。 * 每個斷點調整排版、圖片大小、字體、間距等。 * 優先考慮「可讀性與操作性」。 ## 四、響應式圖片與文字設計 ### 響應式圖片技巧 #### (1) 使用百分比與自動高度 ``` img { width: 100%; height: auto; } ``` #### (2) 使用 object-fit 確保比例不變 ``` img.cover { width: 100%; height: 300px; object-fit: cover; } ``` #### (3) 針對不同解析度提供不同圖片 ``` <!-- 使用 <picture> 元素，能根據螢幕大小載入不同圖片，提高 RWD 效率 --> <picture> <!-- 第一個 <source>：當螢幕寬度 ≤ 768px（手機或小平板）時使用這張圖片 --> <source media="(max-width: 768px)" srcset="image-small.jpg"> <!-- 第二個 <source>：當螢幕寬度 ≥ 769px（桌機或大平板）時使用這張圖片 --> <source media="(min-width: 769px)" srcset="image-large.jpg"> <!-- 預設圖片（fallback）：當瀏覽器不支援 <picture> 或 media 條件不符合時顯示 --> <img src="image-default.jpg" alt="示範圖片"> </picture> ``` ## 五、響應式文字與排版技巧 | 技巧 | 說明 | 範例 | | -------- | -------- | -------- | | 使用 vw 單位 | 字體隨螢幕寬度變化 | `font-size: 3vw;` | | 設定最小與最大字體 |避免過大或過小 | `clamp(14px, 2vw, 24px);` | | Flex / Grid 自適應排版 | 使用 Flexbox 或 Grid 建立彈性欄位 | `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));` | ## 六、實作 ### 下載上週作業檔案 1. 開啟 GitHub 並跳轉至上周作業的倉庫頁面 ![image](https://hackmd.io/_uploads/rJe0wVBkbe.png) 2. 點擊**綠色的 「<> Code」 按鈕** ![image](https://hackmd.io/_uploads/SktyuNSkbg.png) 3. 點擊 **「Download ZIP」** ![image](https://hackmd.io/_uploads/HJ9J_mryZl.png) 4. 到電腦中的 **「下載」** 尋找我們剛下載的壓縮檔，接著對它 **「按右鍵進行解壓縮」** ![image](https://hackmd.io/_uploads/SJSMdEBkbx.png) 5. 解壓縮完變成**一般的資料夾圖示**即可將它拖移至 VS Code 進行接下來的修改操作 ![image](https://hackmd.io/_uploads/BJh4dVrJWe.png) ### 步驟 1：在每個 HTML `<head>` 中加入 viewport（全部頁面都要有） > 這行是 RWD 的「開關」，讓網頁能根據裝置寬度正確縮放。 ``` <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` ### 步驟 2：開啟 style.css，最底部新增以下內容（設定畫面斷點） ``` /* === 響應式設計開始 === */ /* === 手機尺寸 (max-width: 768px) === 當螢幕寬度小於或等於 768px 時套用。 通常代表手機或小型平板。 調整字體、導覽列方向、容器間距等。 */ @media (max-width: 768px) { body { font-size: 14px; /* 字體縮小一點，符合手機畫面 */ line-height: 1.6; /* 調整行距，提升閱讀性 */ } .nav { display: flex; flex-direction: column; /* 導覽列從橫排變直排 */ padding: 8px 0; /* 上下間距縮小 */ } .nav__link { margin: 6px 0; /* 每個導覽項目上下留空，避免擠在一起 */ } .container { width: 95%; /* 主內容區放寬，幾乎滿版 */ padding: 20px; /* 內距縮小，畫面更緊湊 */ } .gallery { grid-template-columns: 1fr; /* 圖片牆改為單欄顯示 */ } .hero { padding: 40px 10px; /* Hero 區內距縮小 */ } .hero__content h1 { font-size: 1.6rem; /* 主標題文字變小以符合手機畫面 */ } img, .dialog-img { width: 100%; /* 圖片寬度自動填滿容器 */ height: auto; /* 高度自動等比例縮放，避免變形 */ } } /* === 平板尺寸 (min-width: 769px) and (max-width: 1024px) === 當螢幕寬度介於 769px～1024px（例如 iPad、平板電腦）時套用。 主要調整圖片牆為兩欄。 */ @media (min-width: 769px) and (max-width: 1024px) { .gallery { grid-template-columns: repeat(2, 1fr); /* 兩欄圖片排列 */ } } /* === 桌機尺寸 (min-width: 1025px) === 螢幕寬度大於 1025px（桌上型電腦或大型螢幕）時套用。 保持原本三欄設計。 */ @media (min-width: 1025px) { .gallery { grid-template-columns: repeat(3, 1fr); /* 三欄圖片排列 */ } } ``` #### 重點說明與教學指引 | 名稱 | 說明 | | -------- | -------- | | `@media` | 媒體查詢（Media Query），用來針對不同裝置寬度套用不同 CSS | | `max-width` | 當螢幕寬度 小於或等於 指定值時生效 | | `min-width` | 當螢幕寬度 大於或等於 指定值時生效 | | `grid-template-columns: repeat(n, 1fr)` | 定義網格欄數。`1fr` 表示等分，`repeat(3, 1fr)` = 三欄平均分配 | | 響應式重點（自動適應畫面） | 大螢幕三欄 → 中螢幕兩欄 → 小螢幕單欄 | | 元素 | 建議調整方向 | 說明 | | -------- | -------- | -------- | | 導覽列 `.nav` | 改成上下排列或隱藏成「選單」 | 讓手機上不會擠成一行 | | 圖片 `.gallery img` | `width: 100%; height: auto;` | 避免被撐開或裁切 | | 主要內容 `.container` | 使用百分比寬度 | `width: 85% → 95%` 可隨螢幕縮放 | | 文字大小 | 使用 `vw` 或 `clamp()` | 自動依螢幕大小調整 | | 表單 | Input 寬度 100%、字體適中 | 避免手機輸入時超出畫面 | ### 步驟 3：測試效果 1. 打開網頁並按 **「F12」** ![image](https://hackmd.io/_uploads/S1bqyVSkbg.png) 2. 點擊這個圖示 ![image](https://hackmd.io/_uploads/HJWylNH1Wx.png) 3. 在紅框處可以選擇要用什麼裝置的尺寸顯示 ![image](https://hackmd.io/_uploads/rJxZyXVSybg.png) 4. 選擇 「Iphone 14 Pro Max」並跳轉到「可領養動物」頁面，接著截圖 > 截圖按 Win + Shift + S ![image](https://hackmd.io/_uploads/rkJ6MEHyZe.png) 5. 選擇 「iPad Air」並跳轉到「可領養動物」頁面，接著截圖 > 截圖按 Win + Shift + S ![image](https://hackmd.io/_uploads/SyvXXVHJWl.png) 6. 在「iPad Air」中「**點擊一下紅框處圖示」**，並跳轉到「可領養動物」頁面，接著截圖 > 可看到畫面轉成平板橫向範例 截圖按 Win + Shift + S ![1](https://hackmd.io/_uploads/rJUaENHkWx.png) ## 七、作業繳交內容 1. GitHub 連結 (建立一個新倉庫，「不要」覆蓋上週內容」 > 修改上週的網站（5 頁）加入 RWD 響應式設計 2. 截圖三張（可領養動物頁面） * 「Iphone 14 Pro Max」裝置範例截圖(像我上面截的那樣) * 「iPad Air」裝置範例截圖(像我上面截的那樣) * 「iPad Air」裝置橫式範例截圖(像我上面截的那樣)