CSS clamp() 计算器
分别给出小视口和大视口下的尺寸，就能得到在两者之间平滑过渡的 clamp()，单位是 rem，因此仍会跟随读者浏览器的字号设置。
视口—
计算得到的尺寸—
敏捷的棕色狐狸
字号阶梯
为什么用 rem 而不是 px
以 px 写的尺寸会忽略读者在浏览器里选的字号。同样的声明写成 rem 就会随它一起缩放：把默认字号设成 20px 的人会看到更大的字，而不是你固定的 16。视口那一项无论如何都用 vw——那关乎屏幕宽度，与读者的偏好无关。
常见问题解答
中间那一项起什么作用？
它就是穿过这两个点的一条直线：一个截距，加上以 vw 表示的斜率。窄于小视口时取最小值，宽于大视口时取最大值。
最大值可以小于最小值吗？
可以，clamp() 照样能用——但屏幕越大，算出的结果反而越小，这几乎肯定不是你想要的。出现这种情况时，页面会给出提示。
会有数据发送到你们的服务器吗？
不会。计算都在你的浏览器里完成，你输入的内容不会离开本页。
由 GO AI 团队打造。 全部免费工具