CSS clamp 响应式字体计算查看

输入最小/最大字体、最小/最大视口和根字号，生成 CSS clamp() 字体公式，并查看中间视口下的字号变化。

最小字体、最大字体、视口范围和根字号例如 16 24 375 1440 16

最小字体

最大字体

最小视口

最大视口

根字号

抽样视口

生成 clamp(min, calc(intercept + slope * vw), max)，上线前仍需检查中文换行、按钮容器和极端屏宽。

等待查詢

結果會在這裡以結構化卡片展示。

可直接查看的示例結果

精選短輸入與高頻排查場景，方便使用者一鍵打開、轉發，也讓搜尋與 AI 更容易理解工具用途。

CSS clamp

用 375 到 1440px 視口、16 到 28px 字號生成可複製 CSS clamp()。

這些說明幫助使用者理解結果，也幫助搜尋引擎和 AI 更準確理解工具用途。

它让字体在最小值和最大值之间随视口线性变化，避免只靠媒体查詢切换造成跳变。

可以复制生成的 clamp()，但上线前仍应在项目断点、浏览器缩放、中文长词和按钮容器里做视觉回归。

可減少許多字號斷點，但不能完全替代版面媒體查詢。容器、行高、按鈕與換行仍需測試。

它們定義字體開始與停止縮放的邊界，避免極窄或極寬螢幕上字號失控。