LESSON-10自主學習實作包

INTEGRATED LAB · Starter

內容驅動響應式與圖片｜整合 Lab

在同一份章節作品中整合 4 個 module，排除單項通過但組合失敗的問題。

最後整合任務

交付：完成由內容決定斷點、文字有界縮放且圖片選擇合理的響應式頁。

將同一組責任轉用到另一個商家情境，仍達成：完成由內容決定斷點、文字有界縮放且圖片選擇合理的響應式頁。

限制：不新增框架。；保留 module id 與驗收證據。

開啟本階段整合檔案 →回到自主學習入口

依序回看每個 topic

整合不是重新背一遍名詞；是把每個 topic 的責任放回同一份作品。

  1. 1. 內容驅動 breakpoint
    files/starter/style.css｜現有 runtime before=nowrap、after=wrap、property=flex-wrap；完整證據需 firstWrapWidth、itemRects 與 mediaMatches
    回到 topic 說明
  2. 2. clamp()
    files/starter/style.css｜現有 runtime before=2rem、after=clamp(2rem,4vw,3rem)、property=--heading-size；完整證據需 values[390,800,1440] 皆為32–48px
    回到 topic 說明
  3. 3. srcset 與 sizes
    files/starter/index.html｜現有 runtime before=100vw、after=(max-width:480px) 100vw, 50vw、attribute=sizes；完整證據需 currentSrc/naturalWidth/candidateByWidth
    回到 topic 說明
  4. 4. 200% zoom、橫向 reflow
    files/starter/main.js｜現有 runtime before=16px、after=32px、property=font-size；完整證據需 scrollWidth<=clientWidth、controlsVisible=true、focusVisible=true
    回到 topic 說明

四個整合停點

每個停點都要留下檔案、畫面或瀏覽器證據。

  1. Step 1｜觀察整合 Starter 並找出第一個未通過 module。

    檔案：files/starter/index.html　定位：#observe

    操作：逐項讀取 outcomes，執行一次現況操作。

    // OBSERVE：不修改程式，先記錄第一個失敗 moduleId。

    預期：能指出第一個未通過 module。

    證據：第一個 moduleId 與缺少的 evidence。

    卡住先查：確認開啟的是 files/starter/index.html。

  2. Step 2｜依 module 順序修改，一次只加入一個責任。

    檔案：files/starter/index.html　定位：#modify

    操作：執行實驗替導覽切換 compact-navigation class，讀取 computed flex-wrap；再以 viewport probe 找內容失效寬度。 → 執行實驗切換 fluid-heading class，讀取實際供 font-size 使用的 --heading-size；再由 viewport probe 計算三個寬度。 → 執行實驗將圖片 sizes attribute 由 100vw 改為 `(max-width:480px) 100vw, 50vw`；完整 probe 再於兩個寬度讀 currentSrc。 → 執行實驗替預覽根節點切換 zoom-200 class，讀取 computed font-size；再以 390px overflow probe 量測 reflow。

    // 10-01-breakpoint: 執行實驗替導覽切換 compact-navigation class，讀取 computed flex-wrap；再以 viewport probe 找內容失效寬度。
// 10-02-clamp: 執行實驗切換 fluid-heading class，讀取實際供 font-size 使用的 --heading-size；再由 viewport probe 計算三個寬度。
// 10-03-srcset-sizes: 執行實驗將圖片 sizes attribute 由 100vw 改為 `(max-width:480px) 100vw, 50vw`；完整 probe 再於兩個寬度讀 currentSrc。
// 10-04-200-zoom-reflow: 執行實驗替預覽根節點切換 zoom-200 class，讀取 computed font-size；再以 390px overflow probe 量測 reflow。

    預期：完成由內容決定斷點、文字有界縮放且圖片選擇合理的響應式頁。

    證據：現有 runtime before=nowrap、after=wrap、property=flex-wrap；完整證據需 firstWrapWidth、itemRects 與 mediaMatches；現有 runtime before=2rem、after=clamp(2rem,4vw,3rem)、property=--heading-size；完整證據需 values[390,800,1440] 皆為32–48px；現有 runtime before=100vw、after=(max-width:480px) 100vw, 50vw、attribute=sizes；完整證據需 currentSrc/naturalWidth/candidateByWidth；現有 runtime before=16px、after=32px、property=font-size；完整證據需 scrollWidth<=clientWidth、controlsVisible=true、focusVisible=true

    卡住先查：回到第一個未通過的 module，只修該處。

  3. Step 3｜驗證所有 module 在整合後仍成立。

    檔案：files/solution/index.html　定位：#verify

    操作：重新整理並依 outcomes 順序重跑所有證據。

    // VERIFY：逐項記錄 pass/fail，不以看到畫面代替 evidence。

    預期：4/4 module 通過。

    證據：每個 moduleId 都有實際結果與重設後重現紀錄。

    卡住先查：若失敗，回到第一個失敗 module，不同時修多項。

  4. Step 4｜把本章責任轉用到不同內容情境。

    檔案：files/starter/index.html　定位：#challenge

    操作：替另一個商家情境重做，仍達成：完成由內容決定斷點、文字有界縮放且圖片選擇合理的響應式頁。

    // CHALLENGE：只替換內容與資料，不新增框架或跳過 self-check。

    預期：完成由內容決定斷點、文字有界縮放且圖片選擇合理的響應式頁。

    證據：轉用後的作品與全數 module self-check。

    卡住先查：先確認共同基底與 module id 未被改壞。

完成本階段後，重新載入並保存整合證據。

回到自主學習入口