🧮 CSS clamp Calculator

Calculate CSS clamp() values in your browser — find the responsive min, preferred and max for any range.

📐 工作原理與說明

計算 CSS clamp() 的中間值與取值區間，輔助流式排版。

最小字號

首選字號

最大字號

最小視口 (px)

最大視口 (px)

即時預覽（拖動瀏覽器寬度觀察字號變化）

響應式字型效果預覽

當前視口：800px

📚 深度解析：CSS clamp 計算器

💡 常見使用場景

生成響應式字號 clamp(min, preferred, max)。

做流式排版：把標題字號設為 clamp(1.25rem, 4vw, 2rem)，小屏不小於 20px、大屏不超過 32px，中間按視口寬度線性縮放，省去多個斷點。

生成

視口 320–1280px、期望 16–24px：clamp(16px, 1rem + 0.625vw, 24px)（約在 320px=16、1280px=24）。

❓ 常見問題（FAQ）

preferred 用 vw 還是 %？

字型用 vw，因 % 相對父字號而非視口。

為什麼用了 clamp 還是會溢位？

clamp 只約束了那一個屬性，容器寬度、內邊距與長單詞換行都會影響實際佔位。另外若 preferred 用 vw 而父容器寬度不隨視口變化（如在固定寬側欄內），字號會與容器脫節。排查時同時檢查 min-width 與 word-break。

CSS clamp 計算器