CSS Clamp

Generate responsive CSS clamp() values for fluid typography

关于这个计算器

CSS Clamp 计算器生成流式的 clamp(min, preferred, max) 表达式，使数值在两个视口宽度之间线性缩放。给定最小值和最大值（rem 或 px）及视口范围，它会推导出穿过两点的直线的 vw 斜率和截距，并给出每个断点处的计算值以供核对。rem 假定根字体大小为 16px。范围颠倒会返回验证错误。非常适合流式排版和间距。

如何使用CSS Clamp工具

  1. 在输入框中输入或粘贴您的内容。
  2. 读取输出——它会在您输入时即时更新。
  3. 如有选项，可根据您的使用场景进行调整。
  4. 复制页面 URL 以分享这个精确的结果。

常见示例

  • 320px 时 1rem → 1280px 时 2rem → clamp(1rem, 1.6667vw + 0.6667rem, 2rem)
  • 375px 时 1.25rem → 1440px 时 3rem → clamp(1.25rem, 2.6291vw + 0.6338rem, 3rem)
  • 320px 时 16px → 1200px 时 32px → clamp(16px, 1.8182vw + 10.1818px, 32px)

常见问题

CSS Clamp工具是如何工作的？

输入或粘贴您的内容，工具会直接在您的浏览器中处理并立即显示结果。您输入的任何内容都不会上传到服务器——整个计算完全在您的设备上完成。

什么时候会用到CSS Clamp工具？

它在开发、调试、设计和运维任务中都很实用——只要您需要快速完成这项转换或检查，无需安装任何软件，也无需把数据托付给第三方服务。

结果有多可靠？

该工具直接实现相关标准或规范，因此其输出与合规软件产生的结果一致。空输入或格式错误等边界情形会被清晰报告，而不是静默失败。

可以把某个结果分享给别人吗？

可以。您的输入会同步更新到 URL，因此复制地址栏并分享链接，对方打开后工具就会处于完全相同的状态。