Clamp() 计算器 · CSS 流式响应式数值生成器

定义流动规则

选择用途并设定数值的起止范围

类型

单位

计算条件

最小字号最大字号最小视口 px 最大视口 px

粘贴一个 clamp() 值，反推出对应的视口范围

生成的表达式会随输入即时更新

生成的 CSS

clamp(16px, 2.7403px + 3.5359vw, 48px)

随视口线性插值： 16px → 48px

互动实验台

模拟视口 800px 计算值 31.03px 当前阶段 流动区间 显示比例 100% · 1:1

在画布上左右拖动，也可使用下方滑块

240 1506

拖动滑块模拟视口宽度，观察数值连续变化

响应曲线 点击或拖动曲线，快速定位视口

最小值线性区间最大值

关于 CSS clamp() 的常见问题

CSS clamp() 是怎么工作的？

clamp(min, preferred, max) 取三个值的中间值：视口小时输出锁定在 min，视口大时锁定在 max，中间按 preferred 里的 vw 表达式线性变化。preferred 通常写成「固定偏移 + 视口比例」的形式，例如 2.7403px + 3.5359vw。

preferred 里的 vw 系数怎么算？

斜率 =（最大值 − 最小值）÷（最大视口 − 最小视口），vw 系数 = 斜率 × 100；截距 = 最小值 − 最小视口 × 斜率。截距加上 vw 项就是 preferred，这也是本工具实时替你完成的计算。

该用 px 还是 rem 写 clamp()？

字号建议用 rem：它跟随用户在浏览器里设置的默认字号，纯 px 会让调大字号的用户失效，是常见的无障碍问题。间距、圆角这类不需要跟随用户字号的值用 px 更直观。本工具切换单位时会按根字号自动换算已填入的数值。

只用 vw 不用 clamp() 行不行？

不建议。纯 vw 在超宽屏上会无限放大、在手机上会缩到无法阅读，而且 WCAG 1.4.4 要求文本可放大到 200%，纯 vw 字号在部分浏览器里无法被用户缩放。clamp() 给出上下界，既保留流动性又守住可读性。

clamp() 的浏览器兼容性如何？

Chrome 79+、Edge 79+、Safari 13.1+、Firefox 75+ 均已支持，2020 年起就是主流浏览器的基线能力，常规项目无需降级方案；若要兼容更老的环境，可在 clamp() 声明前补一行固定值作为回退。

什么是 clamp() 反向推算？

把现有代码里的 clamp() 表达式粘贴进来，工具会解析 min、preferred、max 三段，反解出这条曲线原本对应的最小视口与最大视口，用来读懂别人写的 clamp() 或校验设计稿断点。