本頁只練什麼
能用 clamp(min, preferred, max) 建立會隨 viewport 流動但不超過上下界的標題尺度。
只有 vw 會在極窄頁過小、極寬頁過大；clamp 同時保留流動性與可讀邊界。
要修改的檔案：files/starter/style.css
定位：先讀 root font-size，再計算 2rem 與 3rem 的 px 上下界。｜依 starter-2 定位，只修改「clamp()」的責任。
LESSON-10 · TOPIC 02
clamp()
能用 clamp(min, preferred, max) 建立會隨 viewport 流動但不超過上下界的標題尺度。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
首頁標題在手機太小、超寬桌機又過大，目前需要三條 media query 才勉強控制。
起始狀態：標題使用固定 --heading-size:2rem。
完成後要看到
現有 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
何時會用到
頁面主標題、區塊間距或容器 padding 需要跨寬度平滑縮放但不能失控時。
常見混淆：clamp 的三個參數不是起點、中點、終點；第二個值仍會被 min/max 比較。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
clamp() Bounded fluid values with clamp
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。
.hero-title{font-size:clamp(2rem,4vw,3rem)}三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/style.css定位：先讀 root font-size，再計算 2rem 與 3rem 的 px 上下界。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先讀 root font-size，再計算 2rem 與 3rem 的 px 上下界。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 先讀 root font-size，再計算 2rem 與 3rem 的 px 上下界。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/style.css定位：先讀 root font-size，再計算 2rem 與 3rem 的 px 上下界。要做：執行實驗切換 fluid-heading class，讀取實際供 font-size 使用的 --heading-size；再由 viewport probe 計算三個寬度。
預期：現有 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 上下界。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/style.css定位：先讀 root font-size，再計算 2rem 與 3rem 的 px 上下界。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：現有 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 上下界。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
clamp()runtime fixture · read-only demo
本主題示範畫面：
讓服務跟著需求成長
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
先定義可讀最小與設計最大，再選中間的 fluid value。
提示 2｜關鍵片段
使用 clamp(2rem,4vw,3rem)，不要只留下 4vw。
提示 3｜完整解答與原因
完整解答與原因：4vw 在中間寬度流動；2rem 與 3rem 把結果限制在 32–48px，避免極端尺寸。