CSS clamp() 計算機

產生能讓文字在小螢幕到大螢幕之間平滑縮放的 clamp() 語法。

clamp() 的作用

clamp(min, preferred, max) 會採用理想值(preferred),但絕不會超出最小值與最大值的範圍。當理想值設定為 rem + vw 時,文字大小會隨視窗寬度呈線性增長,並在兩端邊界停止縮放。只需一行程式碼,即可取代繁雜的 Media Query。

計算公式

通過(最小可視區域,最小尺寸)與(最大可視區域,最大尺寸)的直線方程式。斜率 = (最大尺寸 − 最小尺寸) ÷ (最大可視區域 − 最小可視區域)。斜率 × 100 為 vw 係數;y 截距則是固定值部分。

為什麼使用 rem 而非 px

當使用者調大瀏覽器的預設字型大小時,rem 會跟著等比縮放;若固定為 px 則會忽略該設定,造成無障礙存取上的缺陷。除非有特殊原因,否則請優先使用 rem。

情境使用指南

常見問題

為什麼不能只用 vw?

純 vw 在小螢幕上會過小,在大螢幕上又會過大。clamp 則能鎖定極端值,限制在安全區間內。

這也適用於間距設定嗎?

是的 — 相同的計算公式也完全適用於 padding、gap 與 margin。

瀏覽器支援度如何?

自 2020 年起所有主流瀏覽器皆已支援。不支援 IE,但 IE 已不再是支援目標。

產生流體排版的 clamp() 公式需要哪些參數?

只需輸入最小與最大字型尺寸,以及對應的最小與最大可視區域寬度即可。

我可以將產生的 CSS clamp() 數值直接複製到剪貼簿嗎?

可以,點擊專屬的複製按鈕即可立即複製產生的 clamp() CSS 規則。

產生的 clamp() 公式使用了哪些 CSS 單位?

產生的公式結合了 rem 與 vw 單位,在您設定的最小與最大邊界之間實現平滑縮放。

使用此 CSS 工具需要註冊帳號或付費訂閱嗎?

不需要,CSS clamp 計算機完全免費,直接在瀏覽器中即可使用,無需註冊。