CSS clamp 生成器

功能说明

CSS clamp() 是 CSS 原生支持的响应式工具函数，可以在同一个声明中自动在最小值和最大值之间动态插值，无需媒体查询。

语法：clamp(min, preferred, max)。当 preferred 小于 min 时取 min，大于 max 时取 max，介于两者之间时取 preferred。

适用于字体大小、内边距、外边距、圆角、间距等任何需要随视口缩放的属性。

使用步骤

1. 选择单位（px / rem / vw）

2. 输入最小值、最大值、视口起始和结束宽度

3. 点击"生成 clamp()"获取代码

4. 点击输出区域即可一键复制

5. 进阶模式可查看 slope 斜率和计算过程

常见问题

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

clamp() 在现代浏览器中支持良好，包括 Chrome 79+、Firefox 75+、Safari 13.1+、Edge 79+。如需兼容 IE11，请使用 fallback 值。

如何选择起始和结束视口？

起始宽度通常为移动端最小宽度（如 320px），结束宽度通常为大屏断点（如 750px、1200px）。中间区域为平滑过渡区。

你可能还想问

clamp() 三个参数分别是什么？

clamp(最小值, 理想值, 最大值)：理想值通常用 vw 等相对单位随视口缩放，两端夹紧保证可读性；字号、间距、容器宽度都适用，一行替代媒体查询。

为什么有时不按预期缩放？

常见原因是公式写错：vw 前的系数与最大值不匹配，或最小值大于最大值（浏览器取最小值为准）；调整时保持三点换算一致，用生成的表达式直接粘贴最稳。

clamp 的兼容性怎么样？

现代浏览器（Chrome 79+、Safari 13.1+、Firefox 75+）都支持；需要兼容老浏览器时，在上一行写普通 font-size 作回退，clamp 行放后面即可优雅降级。

相关工具

相关内容