讓圖片跟著容器縮放
條件：在 320px 檢查圖片右邊界不超過父容器，且保留比例。 驗收：width:100%、max-width:100%、height:auto 都落在 .hero-media img。
CHAPTER 12 · 180 MINUTES
RWD：版面、圖片與手機導覽
桌機上好看的三欄卡片到了手機擠成細條，圖片超出父容器邊界，導覽連結小到難以點擊。
3個明確任務
2個接回點
1份可見成果
LEARNING GOALS
本章結束時，你能做出什麼
讓卡片依內容寬度改欄數
條件：在 390px 為一欄、800px 為兩欄、1100px 為三欄，並確認 680px 與 1020px 是 CSS 中可追查的切換點。 驗收：每個視窗寬度的實際 grid 欄數與規則一致。
讓手機導覽可換行且容易點擊
條件：在 320px 確認導覽可換行、每個連結至少 44px 高，並用鍵盤與點擊走完三個錨點。 驗收：連結留在導覽盒內，焦點可見且三個目標都能到達。
進場檢核與作品接力
- 具備第 11 章成果：整理後、可追查覆蓋來源的作品集 CSS：不看答案，展示或口述第 11 章成果，並說出一項可見證據。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出 viewport、Computed、欄數或錨點的實際證據。 需要補強時從這裡接回
輸入：第 11 章產物：整理後、可追查覆蓋來源的作品集 CSS
本章輸出：在 320px 到桌機寬度都可閱讀、可操作的作品集，並留下尺寸、欄數與鍵盤／錨點驗收證據
圖片契約：本章使用 HTML 內嵌 data:image/svg+xml 的 900×480 inline SVG，不建立 images/ 目錄。
交棒規則：第 11 章的 .work-card／.work-card__action DOM 不直接複製；保留變數、CTA、focus 與 reduced-motion 責任，移植到 .hero-media img／.work-grid／.portfolio-nav，再把 viewport 矩陣與證據交給第 13 章的 .portfolio-shell／.portfolio-links。
產物類型：mainline；後續用途：第 13 章
PROBLEM & ANALOGY
先理解責任，再寫語法
RWD 像搬家時依房間大小重新擺家具：不是把整間客廳縮小，而是決定哪些家具換行、改成單欄或保留舒適距離。
本章要解決：桌機上好看的三欄卡片到了手機擠成細條，圖片超出父容器邊界，導覽連結小到難以點擊；Starter 的共用練習殼可能裁切頁面捲軸，所以本章以圖片／父容器 right 邊界作為第一證據。
接住上一章：第 11 章整理完成的作品集 CSS；交棒時保留變數、scope、class 呼叫方與 focus／CTA 行為，本章把 RWD 責任移植到練習骨架。
合回共同作品：本章輸出要交回共同作品，並帶著 selector、viewport 矩陣與驗收證據進入第 13 章，不另開一個無關小作品。
把名詞對回畫面與程式
- max-width:100%
- 讓圖片不超過父容器寬度。
- 容器
- 限制內容最大寬度並提供左右安全留白。
- media query
- 在特定可用空間下切換版面規則。
- 斷點
- 內容真的放不下時才切換欄數或導覽排列。
- 點擊區
- 手機連結需要足夠內距，不只看文字大小。
SCOPE
今天的學習邊界
能自己完成
讓圖片不超出容器；讓卡片依可用寬度改欄數；讓手機導覽可換行且容易點擊。
看得懂即可
能辨識固定寬度、內容溢出與可點擊範圍不足。
刻意延後
不追求特定手機型號的像素完美，也不做 JavaScript 漢堡選單。
本章術語：viewport、breakpoint、media query、fluid image、overflow、touch target。遇到英文先回到畫面責任，不要求背拼字。
CORE IDEAS
三個核心觀念
- 先從最窄寬度檢查內容，再逐步增加空間；每次都記錄 viewport、元素盒與頁面
scrollWidth。 - 斷點由內容開始擠壓的位置決定；本章用
680px切兩欄、1020px切三欄，並以實際欄數驗收。 - 圖片的
width:100%、max-width:100%與height:auto分別負責縮放、上限與比例，不能只用overflow:hidden掩蓋問題。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：把 .hero-media img 設成 width: 900px，讓頁面出現水平捲軸；學生先找出實際超寬元素與盒模型證據，再補上流動圖片規則。
- 仍有水平捲動：在 Elements 先定位
.hero-media img或其他固定寬度，對照圖片與父容器的 right 邊界。 - media query 沒反應：確認 viewport meta、
.work-grid的條件方向、680px／1020px與括號。 - 導覽擠在一行：確認
.portfolio-nav的flex-wrap、連結min-height:44px與 padding。
固定順序：先重現 → 讀 Styles／Computed → 確認檔案與元素 → 一次只修一處 → 重跑原操作，最後用鍵盤與錨點點擊驗證。
320px 出現水平捲軸
先查：找超出視窗的圖片、固定寬度或長文字，再修真正來源。
卡片斷點很擠
先查：用內容寬度重新判斷欄數，不要只增加媒體查詢。
手機導覽難以操作
先查：確認連結可換行、點擊區有內距，沒有固定寬度撐開。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架，任務一路加厚
開始前先確認這四件事
- 我先在 320px 重現問題。
- 我知道要修的是圖片、容器、卡片或導覽哪一層。
- 我用內容能否放下來決定斷點。
- 我會測試手機、平板、桌機與鍵盤操作。
讓圖片跟著容器縮放
檔案：style.css
位置：.hero-media img 的 width、max-width、height
結果：320px 圖片 right 不超過父容器，且保留 900:480 比例
設定由內容決定的卡片斷點
檔案：style.css
位置：.work-grid、680px 與 1020px media query
結果：390px／800px／1100px 實際為一欄／兩欄／三欄
讓手機導覽可換行且好點擊
檔案：style.css
位置：.portfolio-nav 與導覽連結的 flex-wrap、min-height、padding
結果：導覽不溢出，每個連結保有足夠內距
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
在 ______ 寬度，我找到 ______ 撐破版面；用 ______ 修正後，圖片盒／欄數／導覽點擊區的實際證據是 ______。
不要用全域 overflow:hidden 掩蓋溢出；需指出真正超出的元素、Computed 值、CSS 來源與修正責任。
提供 320px、390px、800px、1100px 的截圖或量測紀錄；並在 320px 以鍵盤與滑鼠逐一走完三個導覽錨點。
下一章：第 13 章會把前十二章成果整合成同一份作品集。