Toolzy

CSS Clamp 生成器

根据最小/最大尺寸和视口宽度生成流体式 CSS clamp() 值。

输出

输入最小和最大尺寸以及它们适用的视口范围,即可获得可直接使用的 CSS clamp() 表达式,用于流体式响应排版或间距。

使用方法

  1. 输入以像素为单位的最小和最大尺寸。
  2. 输入这些尺寸应适用的最小和最大视口宽度。
  3. 复制生成的 clamp() 声明,也可重命名 CSS 属性。

常见问题

流体值是如何计算的?
它在视口范围内计算最小与最大尺寸之间的线性斜率,以 clamp() 内的 rem + vw 公式表示。
为什么输出使用 rem 和 vw?
rem 使基础尺寸相对于用户的字体设置,而 vw 使其随视口宽度平滑缩放。
如果我的最大视口小于最小视口会怎样?
工具会显示一条校验消息,要求你将最大视口宽度设为大于最小视口宽度。

相关工具