使用方法
- 选择“属性”，输入“最小尺寸”和“最大尺寸”，然后选择“尺寸的单位”。
- 在“尺寸最小时的视口宽度”和“尺寸最大时的视口宽度”中输入两个宽度，并选择它们的单位。
- 若任何地方使用了 rem，请检查“根字号（px）”。除非网站设置了其他尺寸，浏览器使用16 px。
- 复制“CSS 声明”，或查看“计算过程”和“常见宽度下的尺寸”，了解每个宽度下的结果。
clamp() 如何使尺寸变为流体
clamp(MIN, VAL, MAX) 接受一个最小值、一个首选值和一个最大值。CSS 值与单位规范（英文） 规定它与 max(MIN, min(VAL, MAX)) 表示的是完全相同的值。因此尺寸永远不会低于 MIN，也不会高于 MAX，在两者之间则随 VAL 变化；在这里，VAL 是一条依赖于视口宽度的直线。
这条直线从最小视口宽度处的最小尺寸，延伸到最大视口宽度处的最大尺寸。在这两个宽度之外，尺寸保持不变。
slope = (largest size - smallest size) / (largest viewport - smallest viewport); intercept = smallest size - slope x smallest viewport; preferred value = intercept + slope x 100vw斜率、截距与 vw 项
斜率是视口宽度每增加一像素时尺寸的增量。截距是该直线在视口宽度为零时的位置。vw 单位是视口宽度的百分之一，因此斜率乘以100得到随窗口变化的那一项。
在求斜率之前，两个视口宽度和两个尺寸都先换算为像素。rem 值乘以根字号，因此当根字号为16 px 时，同一设计用 rem 或 px 得到的结果相同。
- 最大尺寸应大于或等于最小尺寸。工具拒绝更小的最大尺寸，因为这样的直线会随屏幕变宽而缩小。
- vw 项不会随访客的文字大小设置而变化，但 rem 截距会。请在200% 缩放下测试页面，并尽可能把截距写成 rem。
计算示例：字号从16 px 到24 px
在320 px 视口与1200 px 视口之间，字号从16 px 增大到24 px。斜率为 (24 - 16) / (1200 - 320) = 8 / 880，即约0.0091（保留四位小数）。截距为16 - 0.0091 × 320 = 13.0909 px，视口项为0.9091 vw。
该值为 clamp(16px, 13.0909px + 0.9091vw, 24px)，因此 CSS 声明为 font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);。若使用 rem 单位，在20rem 至75rem 之间从 1rem 变到1.5rem，根字号为16 px 时得到 clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem)。
常见问题
视口比最小宽度还窄时，尺寸会怎样？
尺寸保持为最小尺寸。clamp() 公式从不让值低于其最小值，因此文字在最窄宽度下保持您设定的尺寸。
为什么视口部分写成 vw？
vw 单位是视口宽度的百分之一，因此它会随浏览器窗口大小的改变而改变。像素或 rem 值不会随窗口变化，尺寸就无法跟随窗口。
为什么代码有时把 vw 部分放在前面？
当截距为负数时，代码会先写 vw 部分，再减去截距，读起来更清楚。两种写法得到的值相同。
这个值可以用于内边距、外边距或间距吗？
可以。在“属性”下选择内边距、外边距或间距即可。同一条直线适用于任何长度，因此间距与字号一样随视口变化而增大。
哪些浏览器支持 clamp()？
当前主流浏览器都支持 clamp()。若访客使用较旧的版本，请在依赖流体尺寸之前，先在这些版本中检查页面。
我输入的内容会被保存或发送到服务器吗？
不会。该值在您的浏览器中计算，您输入的内容既不会被保存，也不会发送到我们的服务器。离开页面前请先复制声明。
资料来源
数据和文字最近核对于2026年11月10日星期二。