CHAPTER 12 · PRACTICE WORKSPACE

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

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

04 Solution 3/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-03;請操作完整作品,逐項核對三項 Task 的可見結果。

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

活動頁

清楚整理活動資訊。

品牌頁

呈現品牌故事。

聯絡頁

提供可使用的聯絡入口。

第 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

把完成品帶進本章創作挑戰

三項固定任務都已完成;下一步請改造需求、留下成果證據,不要停在照抄 Solution。

前往本章創作挑戰