条件
320px屏16px，1024px屏24px
CSS
clamp(1rem, y + xvw, 1.5rem)
design / 可用工具
流式排版 Clamp() 生成器
输入视口和期望尺寸范围，自动计算基于纯 CSS 的最佳 clamp() 响应式视口动态适应函数。
CSSClamp响应式
快速切换： CSS 单位转换
在线工具
CSS Clamp 生成器
现代流式排版 (Fluid Typography/Spacing) 的最佳实践：结合 calc() 和 vw 动态自适应。
流式排版 Fluid Typography Demo
拖动调整容器宽度可预览变化 (需要 Resize Observer 支持，当前为近似模拟)
使用场景
- 响应式 Web 排版
- 全自适应 UI
- 无媒体查询适配
如何使用
- 1. 设定视区宽度区间
- 2. 设定对应字号大小
- 3. 查看并复制公式
示例输入输出
FAQ
Clamp 的计算公式是什么？
它是动态基于视窗大小使用 vw 计算出线性斜率从而达到丝滑缩放效果的数学模型。
工具列表
相关推荐
你可以从这里继续打开相近场景的工具，减少重复搜索。
CSS 单位转换
CSS 单位转换器
在 px、rem、em、pt、vw、vh、% 之间互转，支持自定义基准值。
CSS 单位 转换