CHAPTER 12 · PRACTICE WORKSPACE

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

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

02 Checkpoint 1 1/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-01;先核對可見結果,再前往 TASK-02。

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

活動頁

清楚整理活動資訊。

品牌頁

呈現品牌故事。

聯絡頁

提供可使用的聯絡入口。

CONTINUE

繼續完成 TASK-02

前往 Checkpoint 2,依要求完成「設定由內容決定的卡片斷點」。

前往 Checkpoint 2:完成 TASK-02