⇔
CSS clamp 计算
按最小/最大字号与视口宽度,生成响应式 clamp() 表达式,流式排版常用。本地计算。
本地处理 · 不上传
加载工具中…
相关：clamp计算 · 响应式字号 · CSS clamp · 流式排版 · fluid typography
CSS clamp 计算按最小尺寸、最大尺寸与视口区间反推出 clamp() 表达式，实现字号与间距随屏幕宽度平滑变化，无需写媒体查询。
使用步骤
- 设置最小与最大尺寸
- 设置对应的视口宽度区间
- 查看生成的 clamp 表达式
- 复制到 CSS 中使用
使用场景
- 让标题字号在手机与桌面间平滑过渡
- 实现随屏幕缩放的容器内边距
- 减少媒体查询断点数量
- 构建流体排版系统
小贴士
- clamp 的三个参数是最小值、首选值、最大值。首选值通常写成 `Nrem + Mvw` 的形式，斜率由两端条件反推得出。
- 最小值应保证小屏可读，通常正文不低于 16px，否则移动端浏览器可能触发自动缩放。
- 用 rem 而非 px 作为端点单位，用户调整浏览器默认字号时才能正常生效，这关系到无障碍。
常见问题
clamp 和媒体查询怎么选？
尺寸随宽度连续变化用 clamp，一行代码替代多个断点；布局结构发生改变（如从两栏变一栏）仍需媒体查询，clamp 只处理数值渐变。
为什么要混合 rem 和 vw？
纯 vw 会让字号在极窄或极宽屏幕上失控，且用户缩放设置失效。加上 rem 项相当于给曲线一个基准截距，兼顾可访问性与流体效果。
兼容性如何？
现代浏览器普遍支持。需要兼容老浏览器时可在 clamp 之前写一行固定值作为回退，不支持的浏览器会忽略后面的声明。
CSS clamp 计算是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS clamp 计算，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。