clamp() 流式尺寸 - 在线生成 clamp 流式字号与间距 CSS

clamp() 流式尺寸 · 使用说明

clamp() 流式尺寸生成器：填入最小值、最大值与视口区间（如 360–1200px），一键生成 clamp() 一行 CSS，让字号或间距在区间内随视口线性缩放、区间外自动钳住。默认输出 rem + vw 混合式——vw 项负责流式缩放，rem 项保留用户浏览器字号的无障碍放大；也提供纯 px 输出。附实时文字预览，拖动窗口宽度即可验证效果，全部计算在浏览器本地完成。

示例

min 16px / max 24px / 视口 360–1200px

clamp(1rem, 0.7143rem + 1.1905vw, 1.5rem)

如何使用

1. 填最小值与最大值（如标题 16–24px）
2. 填最小/最大视口（如 360 与 1200px）
3. 选择输出单位：rem（推荐）或 px
4. 复制生成的 clamp() 到 font-size / margin / gap 等属性

小贴士

• rem + vw 混合式对浏览器字号缩放更友好，纯 px 会让用户设置失效
• 视口区间取设计稿断点（如 360–1200），区间外 clamp 自动兜底
• 同一边距体系可整站复用同一组参数，保持节奏一致
• 极端小视口下避免最小值过小，正文建议不低于 14px

常见问题