CSS clamp() 函数

定义和用法

CSS 的 clamp() 函数用于设置一个值，该值会根据视口的大小在最小值和最大值之间自适应调整。

clamp() 函数有三个参数：最小值、首选值和最大值。如果首选值在指定范围内，浏览器会选择首选值；否则，浏览器会选择最小值或最大值。

实例

将 <h1> 元素的最小字体大小设置为 2rem，最大字体大小设置为 3.5rem。同时，将 <p> 元素的最小字体大小设置为 1rem，最大字体大小设置为 2.5rem：

h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}

p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

亲自试一试

CSS 语法

clamp(min, preferred, max)
值 描述
min 可选。指定允许的最小值。
preferred 必需。指定首选值。
max 可选。指定允许的最大值。

技术细节

版本： CSS Values and Units Module Level 4

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
79 79 75 13.1 66