条件
视口 320–1200px，尺寸 1–2.5rem，根字号 16px
CSS
clamp(1rem, 0.45rem + 2.72vw, 2.5rem)
设计配色
CSS Clamp 生成 - 流式尺寸响应式工具
根据最小/最大视口宽度与目标尺寸范围，计算 clamp() 公式，用于字号、间距等随视口线性缩放的响应式排版。
CSSclamp响应式
设计配色
CSS Clamp 生成
现代流式排版 (Fluid Typography/Spacing) 的最佳实践：结合 calc() 和 vw 动态自适应。
流式排版 Fluid Typography Demo
拖动调整容器宽度可预览变化 (需要 Resize Observer 支持，当前为近似模拟)
使用场景
- 生成随视口缩放的正文字号
- 为标题配置最小与最大 rem 区间
- 用 clamp 替代部分媒体查询间距
如何使用
- 设定最小与最大视口宽度
- 设定对应最小与最大尺寸（rem）及根字号
- 复制生成的 clamp() 公式
示例输入输出
FAQ
公式是怎么算出来的？
在给定视口区间内，用线性斜率把尺寸从最小值映射到最大值，并用 clamp(min, preferred, max) 限位。
只能用于字号吗？
不是。凡可用长度值表达的字号、间距、宽高等，只要你给出 rem 区间即可生成。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。