🧮 CSS clamp Calculator

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

📐 工作原理与说明

clamp 生成：斜率 = (期望值 − 最小值) ÷ (最小视口 ÷ 100)（vw/100vw），截距 = 期望值 − 斜率 × 最小视口 ÷ 100；表达式 = clamp(最小px, 斜率vw + 截距px, 最大px)

计算 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。

Item

Formula / Note

Source / Standard

Definition

clamp(x, lo, hi) = min(max(x, lo), hi)

CSS Values and Units Level 4

Parameter order

requires lo <= hi; otherwise results are implementation-defined

CSS Values and Units Level 4

Numeric edges

NaN propagates through comparisons and needs handling

IEEE 754-2008

CSS clamp 计算器