函数简介

clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用（低于最小值就用最小值，高于最大值就用最大值，就如卡钳一样）。它接收三个参数：最小值、首选值、最大值，当属性值在最小值与最大值之间时，用首选值（即第二个参数）。

clamp() 允许被用在 <length>、<frequency>、<angle>、<time>、<percentage>、<number>、<integer> 中。

clamp(MIN, VAL, MAX) 其实就是表示 max(MIN, min(VAL, MAX))（min()、max()两个函数留待下一章讲解）。

font-size: clamp(1rem, 2.5vw, 2rem);

以上代码中 clamp() 用来设置随窗口大小改变的字体大小，但是无论窗口怎么改变，字体大小不会小于设置的最小值，也不会超过设置的最大值。这个效果和流体排版（Fluid Typography）一致，但只用了一行代码，且不需要媒体查询语句。

函数语法

selector {
  // clamp(<最小值>, <首选值>, <最大值>) 三个参数都必须传入
  property: clamp(<minimum value>, <value to be clamped>, <maximum value>);
}

clamp() 函数接收三个用逗号分隔的表达式作为参数，按最小值、首选值、最大值的顺序排列。

用法和最佳实践

• 当首选值比最小值要小时，则使用最小值。
• 当首选值介于最小值和最大值之间时，用首选值。
• 当首选值比最大值要大时，则使用最大值。
• 这个表达式可以是数学函数 (参看 calc() )、字面量或其他计算为有效的参数类型 (如<length>) 表达式，如 attr()，或嵌套的 min() 和 max() 。作为数学表达式，你可以使用加减乘除运算而无需使用 calc() 函数。你也可以用括号来确定计算顺序。
• 表达式中的每一个值都可以用不同的单位。

注意：

• 在自动和固定布局表格中，涉及到列、列组、行、行组、单元格的宽度和高度中如果有百分比数学表达式，也许会被视为指定了 auto 。
• 允许设置表达式的值为 max() 和 min() 。这些表达式是数学表达式，所以你可以进行加减乘除运算。
• 表达式可以是使用标准运算符优先规则组合 + 、- 、*、/ 等运算符的值，确保在 + 、- 两侧各有一个空格。表达式中的操作数可以是 <length> 语法值。你可以给每一个值设置不同的单位。你还可以用括号来确定计算顺序。
• 你可能经常会在 clamp() 中结合使用 min() 和 max() 两个函数。

示例代码

html {
  font-family: sans-serif;
}
body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}
h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}

好了，强大的clamp()函数就介绍到这儿了，赶紧动手试试吧！

更多精通CSS的相关精彩文章制作中，敬请期待。欢迎点赞、收藏和转发！

系列文章：

CSS属性值函数（1）概述及语法

CSS属性值函数（2）calc()数值计算