函数简介
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用（低于最小值就用最小值，高于最大值就用最大值，就如卡钳一样）。它接收三个参数：最小值、首选值、最大值，当属性值在最小值与最大值之间时，用首选值（即第二个参数）。
clamp() 允许被用在
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(, , );
} clamp() 函数接收三个用逗号分隔的表达式作为参数，按最小值、首选值、最大值的顺序排列。
用法和最佳实践
- 当首选值比最小值要小时，则使用最小值。
- 当首选值介于最小值和最大值之间时，用首选值。
- 当首选值比最大值要大时，则使用最大值。
- 这个表达式可以是数学函数 (参看 calc() )、字面量或其他计算为有效的参数类型 (如
) 表达式，如 attr()，或嵌套的 min() 和 max() 。作为数学表达式，你可以使用加减乘除运算而无需使用 calc() 函数。你也可以用括号来确定计算顺序。 - 表达式中的每一个值都可以用不同的单位。
注意：
- 在自动和固定布局表格中，涉及到列、列组、行、行组、单元格的宽度和高度中如果有百分比数学表达式，也许会被视为指定了 auto 。
- 允许设置表达式的值为 max() 和 min() 。这些表达式是数学表达式，所以你可以进行加减乘除运算。
- 表达式可以是使用标准运算符优先规则组合 + 、- 、*、/ 等运算符的值，确保在 + 、- 两侧各有一个空格。表达式中的操作数可以是
语法值。你可以给每一个值设置不同的单位。你还可以用括号来确定计算顺序。 - 你可能经常会在 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的相关精彩文章制作中，敬请期待。欢迎点赞、收藏和转发！
系列文章：