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）。中间区域为平滑过渡区。

最新工具