產生能讓文字在小螢幕到大螢幕之間平滑縮放的 clamp() 語法。
clamp(min, preferred, max) 會採用理想值(preferred),但絕不會超出最小值與最大值的範圍。當理想值設定為 rem + vw 時,文字大小會隨視窗寬度呈線性增長,並在兩端邊界停止縮放。只需一行程式碼,即可取代繁雜的 Media Query。
通過(最小可視區域,最小尺寸)與(最大可視區域,最大尺寸)的直線方程式。斜率 = (最大尺寸 − 最小尺寸) ÷ (最大可視區域 − 最小可視區域)。斜率 × 100 為 vw 係數;y 截距則是固定值部分。
當使用者調大瀏覽器的預設字型大小時,rem 會跟著等比縮放;若固定為 px 則會忽略該設定,造成無障礙存取上的缺陷。除非有特殊原因,否則請優先使用 rem。
純 vw 在小螢幕上會過小,在大螢幕上又會過大。clamp 則能鎖定極端值,限制在安全區間內。
是的 — 相同的計算公式也完全適用於 padding、gap 與 margin。
自 2020 年起所有主流瀏覽器皆已支援。不支援 IE,但 IE 已不再是支援目標。
只需輸入最小與最大字型尺寸,以及對應的最小與最大可視區域寬度即可。
可以,點擊專屬的複製按鈕即可立即複製產生的 clamp() CSS 規則。
產生的公式結合了 rem 與 vw 單位,在您設定的最小與最大邊界之間實現平滑縮放。
不需要,CSS clamp 計算機完全免費,直接在瀏覽器中即可使用,無需註冊。