CSS Clamp 生成器

输入最小尺寸、最大尺寸和视口断点,即刻生成在两值之间平滑缩放的 CSS clamp() 表达式,支持 rem 和 px 输出。

浏览器本地处理 无需注册 开发者

根据最小和最大尺寸以及两个视口宽度,计算在两点之间线性变化的 CSS clamp() 表达式。

如何生成 CSS clamp()

  1. 输入最小和最大尺寸,单位为 px。
  2. 输入最小和最大视口宽度,并选择 px 或 rem 输出。
  3. 复制生成的 clamp(min, fluid, max) 表达式。

计算方式

工具计算两个端点之间的线性斜率,并将其转换为 vw 项。

选择 rem 时,尺寸和截距会除以 root size,而斜率仍以 vw 表示。

隐私与限制

计算完全在浏览器中进行。它只假设两个端点之间线性变化,不会检查你的真实布局或 computed style。

CSS clamp 常见问题

clamp() 有什么作用?

它同时指定最小值、流动首选值和最大值。

可以输出 rem 吗?

可以,设置 root size 后选择 rem。

最小视口必须更小吗?

是的,线性插值需要递增区间。

最小尺寸可以大于最大尺寸吗?

不可以,工具会报错。

会读取我的 CSS 吗?

不会,只计算输入的数字。