使用說明
輸入小螢幕與大螢幕分別想要的尺寸，以及這兩個尺寸對應的視窗寬度，工具會解出中間那段線性變化，組成 `clamp(最小值, 常數 + 係數vw, 最大值)`。下方的對照表會列出 375、768、1024、1280 等常見寬度下的實際像素值，讓你不必開瀏覽器就能確認縮放曲線合不合理。
CSS / FRONTEND · 瀏覽器內處理
CSS clamp() 流體尺寸計算
由最小值、最大值與視窗範圍算出 clamp() 流體字級。
以線性內插計算，並顯示各常見視窗寬度下的實際結果，方便驗證。
尺寸與視窗範圍
工具會解出通過兩個端點的直線，並以 clamp() 夾在最小與最大值之間。
clamp() 結果
font-size: clamp(1.125rem, 0.5968rem + 2.2535vw, 2.625rem);
計算式: 1.125rem → 2.625rem, 0.5968rem + 2.2535vw
各視窗寬度的實際尺寸
| 視窗寬度 | 實際尺寸 |
|---|---|
375px | 18px |
768px | 26.86px |
1024px | 32.63px |
1280px | 38.39px |
1440px | 42px |
操作步驟
- 填入最小尺寸與它對應的視窗寬度。
- 填入最大尺寸與它對應的視窗寬度。
- 確認對照表的縮放結果，再複製 clamp() 值。
隱私
所有計算與預覽都在這個瀏覽器內完成，輸入不會上傳、不會保存，也不會寫進網址或紀錄。
常見問題
- 為什麼中間值要用 rem 加 vw 混合？
- 只用 vw 時，尺寸會與視窗寬度成正比，使用者放大字體不會有任何效果，等於忽略了瀏覽器的字級設定。加上一個 rem 常數項後仍然會隨使用者的根字級縮放，兼顧流體排版與無障礙。
- clamp() 的三個參數順序是什麼？
- 依序是最小值、偏好值、最大值。瀏覽器會取偏好值，但不讓它低於最小值或高於最大值。若最小值大於最大值，最小值會勝出，所以工具會擋下這種輸入。