CSS Clamp() 计算器 🔒 完全在您的浏览器中运行——不上传任何数据。

生成用于平滑缩放字体大小的流式 clamp() 值。

仅当您的网站将 html { font-size } 设置为非浏览器默认的 16px 时才需要修改此项。

CSS 输出

 

预览

真正的流式缩放只有在实际调整浏览器窗口大小时才能看到。以下三个示例近似展示了在最小、中间和最大视口宽度下的效果。

最小视口时
敏捷的棕色狐狸跳过了懒狗
中间值(近似)
敏捷的棕色狐狸跳过了懒狗
最大视口时
敏捷的棕色狐狸跳过了懒狗

关于此工具

传统的响应式文字排版在每个媒体查询断点之间突变——手机端 16px,超过某个宽度后突然跳到 20px。CSS 的 `clamp(最小值, 首选值, 最大值)` 用连续缩放取代了这种跳变:字号会随视口宽度平滑地在你设定的最小值和最大值之间变化。视口宽度小于最小值时,字号固定为最小值;大于最大值时,固定为最大值;只有在两者之间时才会灵活变化。

这个计算器会替你完成插值运算:它会根据你设定的视口范围,计算出最小与最大字号之间的线性斜率,将其表示为基于 `vw` 的首选值,并将全部内容打包成可直接粘贴使用的 `clamp()` 字符串。把结果直接粘贴进 `font-size`(或任何数值型属性)即可——无需再为不同断点单独覆盖字号。

常见问题

为什么使用 clamp() 而不是媒体查询?

媒体查询在断点处会在固定尺寸之间跳变,而 clamp() 会随着视口尺寸变化在最小值和最大值之间平滑、连续地缩放——在任何宽度下都不会出现明显的"跳变"。

clamp() 在所有浏览器中都能使用吗?

可以——CSS clamp() 自 2020 年起已被所有主流浏览器(Chrome、Firefox、Safari、Edge)支持,因此如今在生产环境中使用它对几乎所有用户都是安全的,无需回退方案。