CSS clamp() 计算器
给小屏和大屏各设一个尺寸,得到一个中间平滑过渡的响应式 clamp() 值——字号、内边距、外边距、间距都能用。
最小值
最大值
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)结果的中间部分保留了 rem 成分,所以有人放大到 200% 时文字仍会变大——只用视口单位就做不到。
流式文字,大小正好。
计算全部在你的浏览器里完成,这里输入的内容不会上传到 BroBroGo。
常见问题
clamp() 值是怎么算出来的?
你给两个点:小屏宽度下的一个尺寸,和大屏宽度下的一个尺寸。工具在两点之间画一条直线,屏幕变宽时尺寸就平滑增大,再用 clamp() 把它裹起来,让它既不会小于你的小屏尺寸,也不会大于大屏尺寸。两个宽度之间尺寸流式缩放,超出这个范围就停在最近的那个界限上。
为什么结果用 rem 和 vw,而不是像素?
上下限用 rem,中间会变化的部分也保留了 rem 成分,所以读者放大页面或调高浏览器默认字号时文字仍会跟着变大——只用像素或只用视口单位就可能做不到这一点。你按像素输入是因为大多数人习惯这么想,工具会用你的根字号换算成 rem。
除了字号,能用来做间距吗?
可以。同一个值也能用在内边距、外边距、间距、宽度或高度上——任何需要长度的地方都行。把预览切到「盒子」就能看到间距而不是文字在变大。如果小屏和大屏尺寸一样,结果会退化成一个固定长度,因为没有可缩放的空间。
所有浏览器都支持 clamp() 吗?
支持——自 2020 年起所有主流浏览器都支持 clamp(),可以直接用,不用写回退方案。如果最大值特别大或变化特别快,建议放大到 200% 检查一下,确认需要放大的读者仍能看到文字变大。