可以开始使用
浏览器本地 · 无需账号 · 结果留在当前页面
流式预览文本
调整浏览器宽度，查看数值在 28px 到 56px 之间变化。
font-size: clamp(1.75rem, 1.0652rem + 3.0435vw, 3.5rem);
--fluid-font-size: clamp(1.75rem, 1.0652rem + 3.0435vw, 3.5rem);
clamp(1.75rem, 1.0652rem + 3.0435vw, 3.5rem)
clamp(28px, 17.0435px + 3.0435vw, 56px)
斜率
3.0435vw
截距
17.0435px
范围
360px 到 1280px
CSS 布局输出是起始片段。发布前请用真实内容、断点、容器尺寸和浏览器支持情况测试。
CSS clamp 生成器可以把固定范围转换成流式响应式公式。
它适合字体大小、标题尺寸、间距、卡片宽度和设计系统 token。
清晰输入
准备好要处理的最小最大值和视口范围，避免混入不相关内容。
确认输出用途
先确认结果要用于发布、调试、估算、整理还是交付，再选择合适参数。
复核关键边界
结果适合快速处理和初步判断，重要场景仍应按目标平台、团队规则或业务口径复核。
示例
把 16px 到 24px 的字体在 360px 到 1200px 视口之间平滑变化。
假设
用户希望在明确视口范围内做线性缩放。
限制
过度流式缩放可能影响可读性，关键界面仍需在移动端和桌面端实测。
先定最小和最大尺寸
clamp 的价值在于限制范围，先确定手机端和桌面端的可接受字号或间距。
不要让正文无限放大
大屏上标题可以更灵活，正文和按钮文字更适合保持可读的上限。
和真实容器一起测试
clamp 公式看起来正确，也要放进组件里检查换行、按钮高度和卡片间距。
适合响应式字号和间距
标题、卡片间距和 section padding 可以用 clamp 在手机到桌面之间平滑变化。
要有明确上下限
没有合理 min/max 的流式尺寸容易在小屏过小、大屏过大。
设计稿断点仍要检查
clamp 能减少断点数量，但不能替代真实 375px、768px 和桌面宽度 QA。
标题字号
让标题自然响应屏幕。
间距系统
生成 fluid spacing。
设计 token
整理 CSS 变量。
布局尺寸
控制组件宽度变化。
clamp() 是什么？
它可以设置最小值、首选值和最大值。
适合所有字体吗？
不一定，正文文字要特别注意可读性。
结果会上传吗？
不会。计算在浏览器本地完成。
需要再写媒体查询吗？
很多场景不需要，但复杂布局仍可能需要。
clamp 里的三个值分别是什么？
第一个是最小值，第二个是首选流式值，第三个是最大值。浏览器会把结果限制在这个范围内。
clamp 可以完全替代媒体查询吗？
不能完全替代。它适合连续变化的尺寸，但复杂布局切换仍然需要媒体查询或容器查询。
clamp() 是什么？
它可以设置最小值、首选值和最大值。
适合所有字体吗？
不一定，正文文字要特别注意可读性。
结果会上传吗？
不会。计算在浏览器本地完成。
需要再写媒体查询吗？
很多场景不需要，但复杂布局仍可能需要。
clamp 里的三个值分别是什么？
第一个是最小值，第二个是首选流式值，第三个是最大值。浏览器会把结果限制在这个范围内。
clamp 可以完全替代媒体查询吗？
不能完全替代。它适合连续变化的尺寸，但复杂布局切换仍然需要媒体查询或容器查询。
推荐流程
响应式 CSS 流程
先生成 clamp，再换算单位和检查布局。