关于此工具
传统的响应式文字排版在每个媒体查询断点之间突变——手机端 16px,超过某个宽度后突然跳到 20px。CSS 的 `clamp(最小值, 首选值, 最大值)` 用连续缩放取代了这种跳变:字号会随视口宽度平滑地在你设定的最小值和最大值之间变化。视口宽度小于最小值时,字号固定为最小值;大于最大值时,固定为最大值;只有在两者之间时才会灵活变化。
这个计算器会替你完成插值运算:它会根据你设定的视口范围,计算出最小与最大字号之间的线性斜率,将其表示为基于 `vw` 的首选值,并将全部内容打包成可直接粘贴使用的 `clamp()` 字符串。把结果直接粘贴进 `font-size`(或任何数值型属性)即可——无需再为不同断点单独覆盖字号。
常见问题
为什么使用 clamp() 而不是媒体查询?
媒体查询在断点处会在固定尺寸之间跳变,而 clamp() 会随着视口尺寸变化在最小值和最大值之间平滑、连续地缩放——在任何宽度下都不会出现明显的"跳变"。
clamp() 在所有浏览器中都能使用吗?
可以——CSS clamp() 自 2020 年起已被所有主流浏览器(Chrome、Firefox、Safari、Edge)支持,因此如今在生产环境中使用它对几乎所有用户都是安全的,无需回退方案。