CSS Clamp 生成器
根据最小/最大尺寸和视口宽度生成流体式 CSS clamp() 值。
输出
输入最小和最大尺寸以及它们适用的视口范围,即可获得可直接使用的 CSS clamp() 表达式,用于流体式响应排版或间距。
使用方法
- 输入以像素为单位的最小和最大尺寸。
- 输入这些尺寸应适用的最小和最大视口宽度。
- 复制生成的 clamp() 声明,也可重命名 CSS 属性。
常见问题
- 流体值是如何计算的?
- 它在视口范围内计算最小与最大尺寸之间的线性斜率,以 clamp() 内的 rem + vw 公式表示。
- 为什么输出使用 rem 和 vw?
- rem 使基础尺寸相对于用户的字体设置,而 vw 使其随视口宽度平滑缩放。
- 如果我的最大视口小于最小视口会怎样?
- 工具会显示一条校验消息,要求你将最大视口宽度设为大于最小视口宽度。