CHAPTER 12 · PRACTICE WORKSPACE

RWD：版面、圖片與手機導覽

在 320px 到桌機寬度都可閱讀、可操作的作品集

01 Starter 0/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

讓圖片跟著容器縮放

修改檔案：style.css

完成後看見：320px 圖片 right 不超過父容器，且圖片保留比例

TASK-02稍後處理

設定由內容決定的卡片斷點

修改檔案：style.css

完成後看見：390px／800px／1100px 實際為一欄／兩欄／三欄

TASK-03稍後處理

讓手機導覽可換行且好點擊

修改檔案：style.css

完成後看見：320px 導覽可換行，連結留在導覽盒內且至少 44px 高，鍵盤與點擊都能到達三個錨點

WORKSPACE

本階段實作區

先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。

FOCUS TASK · TASK-01

現在只處理：讓圖片跟著容器縮放

修改：style.css

完成後：320px 圖片 right 不超過父容器，且圖片保留比例

講解時展開：2 個小型比較

width vs max-width｜圖片不撐破容器

比較：width: 100% 讓圖片跟著容器縮放，max-width 限制它不要超過原始可用寬度。

現在做：在 .hero-media img 先只改 width:100%，於 320px 重跑並記錄圖片與父容器 right；再補 max-width:100%，比較兩次結果。

看預期與證據

預期：width:100% 讓圖片跟著內容盒縮放；max-width:100% 讓圖片不超過父容器，兩次結果都能以邊界說明。

證據：前後紀錄包含 .hero-media img／父容器 right，並口述 width 與 max-width 各自解決的責任。

height auto｜保留圖片比例

比較：圖片縮放時保留 auto 高度，才能避免寬度改變後被拉扁。

現在做：暫時把 .hero-media img 的 height 改成固定 180px，再於 320px 與 800px 比較圖片寬高比；最後恢復 height:auto 並重跑。

看預期與證據

預期：固定高度會在寬度改變時破壞 900:480 比例；恢復 height:auto 後，圖片能隨寬度等比例縮放。

證據：前後紀錄包含圖片 width／height 與 900:480 的比例比較，並說明 height:auto 為何不能省略；確認 src 仍是 inline SVG。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：以 320px 開啟 Starter，確認 .hero-media img 固定 900px 且圖片 right 超過父容器 right；記下共用練習殼對頁面捲軸的裁切行為。
  2. B｜預測：預測 width:100% 會讓圖片服從容器、max-width:100% 會封頂，height:auto 會保留 900:480 比例。
  3. C｜實作：在 style.css 的 .hero-media img 只補 display:block、width:100%、max-width:100%、height:auto。
  4. D｜故障：若結果不一致，先重現 320px，再比較圖片／父容器 right，最後檢查 .hero-media img 的 Computed、source 與 inline SVG src。
  5. E｜驗收：圖片 right 不超過父容器、保留 900:480 比例，且三個圖片規則可追查。

完成條件：DONE-01：320px 圖片 right 不超過父容器、保留 900:480 比例，且 Computed 可追到三個圖片規則

綠色作品集示意圖
圖片要完整留在容器內。

活動頁

清楚整理活動資訊。

品牌頁

呈現品牌故事。

聯絡頁

提供可使用的聯絡入口。

第 11 章 → 第 12 章

把可追查的 CSS 放回不同寬度

第 11 章的 .work-card／.work-card__action DOM 不直接複製到本章；保留 --color-brand、--color-ink、--space-card 與 CTA／focus／reduced-motion 責任，移植到 .hero-media img／.work-grid／.portfolio-nav，並把 320／390／800／1100 viewport 證據交給第 13 章的 .portfolio-shell／.portfolio-links。

CONTINUE

開始 TASK-01

前往 Checkpoint 1，依要求完成「讓圖片跟著容器縮放」。

前往 Checkpoint 1：完成 TASK-01