本頁只練什麼
能分辨 rem 依根元素、em 依目前字體尺度、ch 約依字形 0 寬度，並用 ch 限制段落行長。
相對單位能跟隨使用者字級與元件尺度；適當行長可減少閱讀時跨行尋找下一行的負擔。
要修改的檔案：files/starter/style.css
定位：先確認根元素與父層 computed font-size 都是 16px。｜依 starter-2 定位，只修改「rem、em、ch 與可讀行長」的責任。
LESSON-06 · TOPIC 02
rem、em、ch 與可讀行長
能分辨 rem 依根元素、em 依目前字體尺度、ch 約依字形 0 寬度，並用 ch 限制段落行長。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
文章段落在大螢幕拉得太長，且元件 padding 不會跟著字級成比例調整。
起始狀態：父層字級 16px；段落 font-size:1em，沒有行長上限。
完成後要看到
runtime 的 font-size 由 16px 變 20px；Styles 顯示 max-width:60ch，文字仍能在窄版縮排。
驗收證據：runtime before=16px、after=20px、property=font-size；Styles 另可指出 padding:1em 與 max-width:60ch
何時會用到
建立可縮放字級、元件內相對間距與限制長篇段落閱讀寬度時。
常見混淆：ch 不是精確的中文字數；不同字型與 glyph 寬度會影響實際每行內容。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
rem、em、ch 與可讀行長 Relative length units and readable line length
rem 看整頁基準，em 看目前文字大小，ch 適合描述一行大約能放多少字元寬度。
正式說法：rem 相對 root element font-size；em 在 font-size 上相對父層 computed font-size，在其他 property 上相對元素自身 font-size；ch 代表字型中 0 glyph 的 advance measure。
.article-copy { font-size:1.25rem; padding:1em; max-width:60ch; }三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/style.css定位：先確認根元素與父層 computed font-size 都是 16px。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先確認根元素與父層 computed font-size 都是 16px。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先確認根元素與父層 computed font-size 都是 16px。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/style.css定位：先確認根元素與父層 computed font-size 都是 16px。要做：執行實驗切換 readable-scale class，讀取 font-size 由 1em 基準轉為 1.25rem 的 computed value。
預期：runtime 的 font-size 由 16px 變 20px；Styles 顯示 max-width:60ch，文字仍能在窄版縮排。
證據：runtime before=16px、after=20px、property=font-size；Styles 另可指出 padding:1em 與 max-width:60ch
卡住先查：先確認根元素與父層 computed font-size 都是 16px。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/style.css定位：先確認根元素與父層 computed font-size 都是 16px。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 font-size 由 16px 變 20px；Styles 顯示 max-width:60ch，文字仍能在窄版縮排。
證據：runtime before=16px、after=20px、property=font-size；Styles 另可指出 padding:1em 與 max-width:60ch
卡住先查：先確認根元素與父層 computed font-size 都是 16px。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
rem、em、ch 與可讀行長runtime fixture · read-only demo
本主題示範畫面：
這段內容用來比較 rem、em 與 ch。
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
先分清楚字級基準：rem 看 root，em 看目前上下文。
提示 2｜關鍵片段
將段落設為 1.25rem，再以 1em padding、60ch max-width 建立比例與行長。
提示 3｜完整解答與原因
完整解答與原因：16px 根字級下 1.25rem=20px；padding:1em 隨段落字級，60ch 限制可讀行長但不宣稱精確中文字數。