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