讓圖片不超出容器
不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。
CHAPTER 12 · 180 MINUTES
RWD：版面、圖片與手機導覽
桌機上好看的三欄卡片到了手機擠成細條，圖片撐出水平捲動，導覽連結小到難以點擊。
3個明確任務
2個接回點
1份可見成果
LEARNING GOALS
本章結束時，你能做出什麼
讓卡片依可用寬度改欄數
不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。
讓手機導覽可換行且容易點擊
不是背名詞，而是能在練習頁操作、指出程式位置並解釋畫面結果。
PROBLEM & ANALOGY
先理解責任，再寫語法
RWD 像搬家時依房間大小重新擺家具：不是把整間客廳縮小，而是決定哪些家具換行、改成單欄或保留舒適距離。
本章要解決：桌機上好看的三欄卡片到了手機擠成細條，圖片撐出水平捲動，導覽連結小到難以點擊。
接住上一章：第 11 章整理完成的作品集 CSS。
合回共同作品：本章成果必須回到同一份作品集檢查，不另開一個無關小作品。
把名詞對回畫面與程式
- max-width:100%
- 讓圖片不超過父容器寬度。
- 容器
- 限制內容最大寬度並提供左右安全留白。
- media query
- 在特定可用空間下切換版面規則。
- 斷點
- 內容真的放不下時才切換欄數或導覽排列。
- 點擊區
- 手機連結需要足夠內距，不只看文字大小。
SCOPE
今天的學習邊界
能自己完成
讓圖片不超出容器；讓卡片依可用寬度改欄數；讓手機導覽可換行且容易點擊。
看得懂即可
能辨識固定寬度、內容溢出與可點擊範圍不足。
刻意延後
不追求特定手機型號的像素完美，也不做 JavaScript 漢堡選單。
本章術語：viewport、breakpoint、media query、fluid image、overflow、touch target。遇到英文先回到畫面責任，不要求背拼字。
CORE IDEAS
三個核心觀念
- 先從最窄寬度檢查內容，再逐步增加空間。
- 斷點由內容開始擠壓的位置決定，不由熱門裝置名稱決定。
- 圖片
max-width: 100%只解決溢出，仍要保留 width 與 height 避免版面跳動。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：把圖片設成 width: 900px，讓頁面出現水平捲軸；學生先用 DevTools 找出超寬元素，再改為流動圖片。
- 仍有水平捲動：在 Elements 逐層檢查寬度，特別注意固定 px 與長字串。
- media query 沒反應：確認 viewport meta、條件方向與括號。
- 導覽擠在一行：檢查 flex-wrap 與連結 padding。
固定順序：先重現 → 讀 Console／Styles → 確認檔案與元素 → 一次只修一處 → 重跑原操作。
320px 出現水平捲軸
先查：找超出視窗的圖片、固定寬度或長文字，再修真正來源。
卡片斷點很擠
先查：用內容寬度重新判斷欄數，不要只增加媒體查詢。
手機導覽難以操作
先查：確認連結可換行、點擊區有內距，沒有固定寬度撐開。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架
開始前先確認這四件事
- 我先在 320px 重現問題。
- 我知道要修的是圖片、容器、卡片或導覽哪一層。
- 我用內容能否放下來決定斷點。
- 我會測試手機、平板、桌機與鍵盤操作。
讓圖片跟著容器縮放
檔案：style.css
位置：依任務文字搜尋對應元素或函式
結果：320px 寬度不再出現圖片造成的水平捲動
設定由內容決定的卡片斷點
檔案：style.css
位置：依任務文字搜尋對應元素或函式
結果：手機一欄、較寬畫面兩欄
讓手機導覽可換行且好點擊
檔案：style.css
位置：依任務文字搜尋對應元素或函式
結果：導覽不溢出，每個連結保有足夠內距
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
在 ______ 寬度，我找到 ______ 撐破版面；用 ______ 修正後，導覽點擊區是 ______。
不要用全域 overflow:hidden 掩蓋溢出；需指出真正超出的元素與修正責任。
提供 320px、768px、桌機三張截圖，並在 320px 逐一點開導覽連結。
下一章：第 13 章會把前十二章成果整合成同一份作品集。