CSS clamp 流動字級產生器
依兩組字級與視窗寬度產生 rem/vw CSS clamp 運算式,支援設定根字級。
使用方法
輸入最小、最大像素字級與對應視窗寬度。偏好值在兩點之間線性變化,並由 rem 表示的上下限約束。
根字級為 16px 時,320px 視窗用 16px、1280px 視窗用 32px,可得到 clamp(1rem, 0.666667rem + 1.666667vw, 2rem)。將結果作為 font-size 等 CSS 屬性的值。
行為與限制
根字級只是 px 轉 rem 時的計算假設,本工具不會更改樣式表。套用後應測試瀏覽器縮放與長文字,不要停用使用者字級縮放。
參考資料
常見問題
最小字級能等於最大字級嗎?
可以,這會得到固定字級。最大視窗仍必須大於最小視窗。
輸入會被上傳嗎?
不會。計算在瀏覽器中完成,本工具不會將輸入提交至 API 或儲存到本機儲存空間。文字類工具最多接受 200,000 個字元。