LESSON-10 · 自主延伸
把「內容驅動響應式與圖片」拆成 4 個可獨立完成、可重設、可驗證的自主學習 module。
成果：完成由內容決定斷點、文字有界縮放且圖片選擇合理的響應式頁。
需要的檔案：files/starter/index.html（整合起點，保留跨 module 的最小缺口。）
完成後：完成由內容決定斷點、文字有界縮放且圖片選擇合理的響應式頁。
逐項展開；答不出來時先走補救連結，不必硬做。
自我檢查：我能否開啟 Elements、Console 或 Network 並找到本頁？
每一個目標只對應一個 module；成功狀態必須能指出證據。
依序展開；每次只改一項，操作後確認該模組自己的 DOM、progress 與 evidence。
白話：不要問『iPhone 是幾 px』，要問『我的導覽從幾 px 開始擠不下』。
正式說法：A content-driven breakpoint is a media-query threshold selected from observed layout failure rather than device taxonomy；the responsive rule changes layout at that measured condition。
何時使用：導覽列、卡片列、表單欄位在容器縮小時開始碰撞、截斷或不可讀時。
修改前後：Before：用 device names 選 375/768px。After：拖曳 viewport，記錄內容第一個失效寬度並在其附近設 query。
常見混淆：breakpoint 不是每個常見裝置各一條 media query；一個版面只需要處理實際內容狀態轉移。
情境：品牌導覽加入『企業永續顧問服務』後，在平板橫向就開始重疊，但原本只為手機設 breakpoint。
起始狀態：導覽為 display:flex、flex-wrap:nowrap，四個連結保留真實長文字。
目前主題：內容驅動 breakpoint
預期：runtime 的 flex-wrap 由 nowrap 變 wrap；後續 viewport probe 能量得第一個 item rect 重疊／換行點與 media query match。
證據：現有 runtime before=nowrap、after=wrap、property=flex-wrap；完整證據需 firstWrapWidth、itemRects 與 mediaMatches
第一個檢查：先拖曳預覽並記下第一個連結換行或互相擠壓的寬度。
重設：重新載入 module，移除 compact-navigation class，viewport 回到初始寬度。
本模組官方來源：MDN｜Using media queries
白話：clamp 像有最小與最大護欄，中間可以跟著畫面寬度平滑變化。
正式說法：clamp(MIN, VAL, MAX) resolves to max(MIN,min(VAL,MAX)); a relative preferred value such as vw provides fluid interpolation bounded by accessible minimum and design maximum。
何時使用：頁面主標題、區塊間距或容器 padding 需要跨寬度平滑縮放但不能失控時。
修改前後：Before：每個 breakpoint 跳一個固定 font-size。After：preferred 值流動，min/max 保護極端寬度。
常見混淆：clamp 的三個參數不是起點、中點、終點；第二個值仍會被 min/max 比較。
情境：首頁標題在手機太小、超寬桌機又過大，目前需要三條 media query 才勉強控制。
起始狀態：標題使用固定 --heading-size:2rem。
目前主題：clamp()
預期：現有 runtime 真正把控制 font-size 的 token 改為 clamp 表達式；完整 viewport facts 顯示三個 computed 值皆介於 32px 與 48px。
證據：現有 runtime before=2rem、after=clamp(2rem,4vw,3rem)、property=--heading-size；完整證據需 values[390,800,1440] 皆為32–48px
第一個檢查：先讀 root font-size，再計算 2rem 與 3rem 的 px 上下界。
重設：重新載入 module，移除 fluid-heading class。
本模組官方來源：MDN｜clamp()
白話：srcset 是可選圖片清單，sizes 是告訴瀏覽器『這個位置大約會顯示多寬』。
正式說法：Width-descriptor srcset supplies candidate intrinsic widths；sizes defines the source size used with device pixel ratio to select a candidate before layout completes。
何時使用：同一內容圖片在手機佔滿寬、桌機只佔半欄，需要避免所有裝置都下載最大檔時。
修改前後：Before：所有 viewport 使用單一最大圖或 sizes=100vw。After：候選寬度與真實 layout slot 規則一致。
常見混淆：sizes 不是圖片檔案本身的尺寸，也不會直接設定 CSS width；它是候選選擇提示。
情境：桌機圖片實際只佔半欄，但瀏覽器仍依 100vw 選擇 1280px 候選。
起始狀態：img 有兩個 width descriptor candidates，sizes 暫為 100vw。
目前主題：srcset 與 sizes
預期：runtime 的 sizes attribute 真正更新；完整 image probe 在不同 viewport 回報 currentSrc、naturalWidth 與選中候選。
證據：現有 runtime before=100vw、after=(max-width:480px) 100vw, 50vw、attribute=sizes；完整證據需 currentSrc/naturalWidth/candidateByWidth
第一個檢查：先看 CSS layout 的真實 slot width，再檢查 sizes 是否描述相同規則。
重設：重新載入 module，sizes 回到 100vw；候選皆為教材本地資產。
本模組官方來源：MDN｜Responsive images
白話：把字放大兩倍時，頁面應重新排成更高的單欄，不該要求使用者同時左右上下找內容。
正式說法：Reflow requires content to adapt without loss of information/functionality and without two-dimensional scrolling at equivalent narrow CSS viewport conditions, except essential two-dimensional layouts。
何時使用：驗收響應式導覽、卡片、表單、CTA 與任何固定高度容器時。
修改前後：Before：用 fixed height 與 overflow:hidden 維持卡片外觀。After：高度由內容撐開、controls 可換行，200% 仍完整。
常見混淆：瀏覽器 page zoom 與只改一個元素 font-size 不完全相同；本 microLab 先模擬文字尺度，完整驗收仍要用瀏覽器 zoom。
情境：聯絡卡片在 200% zoom 時，固定高度裁掉錯誤訊息，兩個按鈕又推出 viewport。
起始狀態：預覽根字級 16px；actions 已允許 wrap，卡片高度為 auto。
目前主題：200% zoom、橫向 reflow
請留下需求，我們會在下一個工作日回覆。
預期：runtime 的 font-size 由 16px 變 32px；完整 overflow probe 證明 documentOverflow=false，文字與按鈕仍可見可聚焦。
證據：現有 runtime before=16px、after=32px、property=font-size；完整證據需 scrollWidth<=clientWidth、controlsVisible=true、focusVisible=true
第一個檢查：先確認 viewport meta 與 390px 寬度，再比較 document scrollWidth/clientWidth。
重設：重新載入 module，移除 zoom-200 class，viewport 回到390px測試起點。
本模組官方來源：WCAG｜Reflow
情境：在同一份章節作品中整合 4 個 module，排除單項通過但組合失敗的問題。
交付：完成由內容決定斷點、文字有界縮放且圖片選擇合理的響應式頁。
檔案：files/starter/index.html 定位：#observe
操作：逐項讀取 outcomes，執行一次現況操作。
// OBSERVE：不修改程式，先記錄第一個失敗 moduleId。預期：能指出第一個未通過 module。
證據：第一個 moduleId 與缺少的 evidence。
原因：先觀察可避免未重現就直接改答案。
卡住先查：確認開啟的是 files/starter/index.html。
檔案：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。
卡住先查：回到第一個未通過的 module，只修該處。
檔案：files/solution/index.html 定位：#verify
操作：重新整理並依 outcomes 順序重跑所有證據。
// VERIFY：逐項記錄 pass/fail，不以看到畫面代替 evidence。預期：4/4 module 通過。
證據：每個 moduleId 都有實際結果與重設後重現紀錄。
原因：單項通過不代表整合後沒有 selector、id 或狀態衝突。
卡住先查：若失敗，回到第一個失敗 module，不同時修多項。
檔案：files/starter/index.html 定位：#challenge
操作：替另一個商家情境重做，仍達成：完成由內容決定斷點、文字有界縮放且圖片選擇合理的響應式頁。
// CHALLENGE：只替換內容與資料，不新增框架或跳過 self-check。預期：完成由內容決定斷點、文字有界縮放且圖片選擇合理的響應式頁。
證據：轉用後的作品與全數 module self-check。
原因：能轉用才代表理解責任，而非只記住原範例。
卡住先查：先確認共同基底與 module id 未被改壞。
重設方法：重新載入 files/starter/index.html；若 localStorage 不可用，使用頁面內記憶狀態並提供重設按鈕。
挑戰：將同一組責任轉用到另一個商家情境，仍達成：完成由內容決定斷點、文字有界縮放且圖片選擇合理的響應式頁。
限制：不新增框架。；保留 module id 與驗收證據。
提交證據：提交可直接開啟的作品與逐項 self-check。
拆小：在「內容驅動響應式與圖片」先完成第一個尚未通過的 module：內容驅動 breakpoint，不同時修改其他責任。
串接：依 10-01-breakpoint → 10-02-clamp → 10-03-srcset-sizes → 10-04-200-zoom-reflow 核對各自輸入與證據。
完整解答與原因：依序執行 執行實驗替導覽切換 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。；這個順序能把每個結果對回單一 module，避免整合後無法定位。
完整解答預設收合；先留下自己的嘗試，再開第三層。