CSS Clamp 计算器

使用方法

1. 选择需要做成流体数值的 CSS 属性。
2. 输入最小与最大视口宽度，单位为像素。
3. 输入两个视口端点所对应的属性值。
4. 选择 rem 或 px 输出；使用 rem 时，可设置换算所用的根字体大小。
5. 查看曲线与采样值，拖动预览滑块，再复制完整声明或单独的 clamp() 数值。

默认设置为 320px 到 1440px、16px 到 32px，生成结果如下：

font-size: clamp(1rem, 0.7143rem + 1.4286vw, 2rem);

生成表达式的含义

clamp(最小值, 首选值, 最大值) 会尽量采用首选值，同时确保结果不越过上下限。工具依据两个“视口宽度—属性值”端点计算直线：

斜率 = (结束值 - 起始值) / (最大视口 - 最小视口)
截距 = 起始值 - 斜率 × 最小视口
首选值 = 截距 + (斜率 × 100)vw

视口小于起点时，属性停在对应端点；位于两个端点之间时，数值线性变化；超过终点后，另一侧边界接管。

流体排版与间距

当断点切换会造成明显跳变时，流体数值很实用，例如标题字号、区块内边距、网格间距和内容宽度。对于必须严格固定的尺寸，例如 1px 边框，则通常没有必要使用 clamp。

字号使用 rem 边界，可以保留它与根字体大小的关系。完成后仍应在浏览器 200% 缩放、窄屏和较长翻译文本下测试；公式正确并不等于组件一定不会溢出。

反向范围与固定值

结束值可以小于起始值。此时首选表达式会包含负的 vw 项，使属性随视口变宽而减小。工具只会将 clamp() 的上下边界按正确顺序排列，不会改变直线方向。

如果两个端点相同，就不需要流体计算，输出会简化为 1rem 这样的固定长度。负值仅对 margin 和自定义属性开放，因为其他预设属性通常不接受或不适合负长度。

隐私

所有逻辑都在客户端运行。ZeroTool 不会上传视口宽度、属性值或生成的 CSS。表单状态只保存在浏览器本地，可通过“重置”删除。