CHAPTER 12 · PRACTICE WORKSPACE

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

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

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

TASK STATUS

三項任務目前狀態

TASK-01已完成

讓圖片跟著容器縮放

修改檔案:style.css

完成後看見:320px 寬度不再出現圖片造成的水平捲動

TASK-02已完成

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

修改檔案:style.css

完成後看見:手機一欄、較寬畫面兩欄

TASK-03本階段處理

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

修改檔案:style.css

完成後看見:導覽不溢出,每個連結保有足夠內距

WORKSPACE

本階段實作區

已完成 TASK-02;先核對可見結果,再前往 TASK-03。

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

活動頁

清楚整理活動資訊。

品牌頁

呈現品牌故事。

聯絡頁

提供可使用的聯絡入口。

CONTINUE

繼續完成 TASK-03

前往 Solution,依要求完成「讓手機導覽可換行且好點擊」。

前往 Solution:完成 TASK-03