本頁只練什麼
能在導覽內容第一次擁擠或換行的寬度設定 breakpoint，而不是依特定手機型號命名。
裝置尺寸會變、文字也可能翻譯變長；由內容失效點決定斷點，版面才對真實內容有韌性。
要修改的檔案：files/starter/style.css
定位：先拖曳預覽並記下第一個連結換行或互相擠壓的寬度。｜依 starter-1 定位，只修改「內容驅動 breakpoint」的責任。
LESSON-10 · TOPIC 01
內容驅動 breakpoint
能在導覽內容第一次擁擠或換行的寬度設定 breakpoint，而不是依特定手機型號命名。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
品牌導覽加入『企業永續顧問服務』後，在平板橫向就開始重疊，但原本只為手機設 breakpoint。
起始狀態：導覽為 display:flex、flex-wrap:nowrap，四個連結保留真實長文字。
完成後要看到
runtime 的 flex-wrap 由 nowrap 變 wrap；後續 viewport probe 能量得第一個 item rect 重疊／換行點與 media query match。
驗收證據：現有 runtime before=nowrap、after=wrap、property=flex-wrap；完整證據需 firstWrapWidth、itemRects 與 mediaMatches
何時會用到
導覽列、卡片列、表單欄位在容器縮小時開始碰撞、截斷或不可讀時。
常見混淆：breakpoint 不是每個常見裝置各一條 media query；一個版面只需要處理實際內容狀態轉移。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
內容驅動 breakpoint Content-driven responsive breakpoint
不要問『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。
.site-nav{display:flex;flex-wrap:nowrap}@media(max-width:44rem){.site-nav{flex-wrap:wrap}}三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/style.css定位：先拖曳預覽並記下第一個連結換行或互相擠壓的寬度。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先拖曳預覽並記下第一個連結換行或互相擠壓的寬度。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先拖曳預覽並記下第一個連結換行或互相擠壓的寬度。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/style.css定位：先拖曳預覽並記下第一個連結換行或互相擠壓的寬度。要做：執行實驗替導覽切換 compact-navigation class，讀取 computed flex-wrap；再以 viewport probe 找內容失效寬度。
預期：runtime 的 flex-wrap 由 nowrap 變 wrap；後續 viewport probe 能量得第一個 item rect 重疊／換行點與 media query match。
證據：現有 runtime before=nowrap、after=wrap、property=flex-wrap；完整證據需 firstWrapWidth、itemRects 與 mediaMatches
卡住先查：先拖曳預覽並記下第一個連結換行或互相擠壓的寬度。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/style.css定位：先拖曳預覽並記下第一個連結換行或互相擠壓的寬度。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 flex-wrap 由 nowrap 變 wrap；後續 viewport probe 能量得第一個 item rect 重疊／換行點與 media query match。
證據：現有 runtime before=nowrap、after=wrap、property=flex-wrap；完整證據需 firstWrapWidth、itemRects 與 mediaMatches
卡住先查：先拖曳預覽並記下第一個連結換行或互相擠壓的寬度。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
內容驅動 breakpointruntime fixture · read-only demo
本主題示範畫面：
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
使用真實導覽文字，不以空白短字測 breakpoint。
提示 2｜關鍵片段
從寬到窄拖曳，記錄第一個失效點，再讓 compact layout 在該點前生效。
提示 3｜完整解答與原因
完整解答與原因：斷點依內容第一次擁擠決定；media query 只在該狀態轉移時把 nowrap 改為 wrap，不綁特定裝置名稱。