CSS函数中的min()、max()和clamp()是CSS值和单位模块第九部分，它们常被称为比较函数。这几个函数并不是什么最新的特性，早在2018年年底就有浏览器开始支持它们，今年4月份Firefox也开始支持这几个函数，这也意味着现在所有主流浏览器都支持这些函数。它们最大的作用就是可以为我们提供动态布局和更灵活设计组件方法。简单地说，这几个函数可以用来设置元素尺寸，比如容器大小，字号大小，内距，外距等。在这篇文章中，我将用一些示例和大家一起来探讨这几个函数在实际中的使用，希望能更好的帮助大家理解它们。

兼容性

从Caniuse.com中的数据可以得知，到写这篇文章为止，min()、max()和clamp()函数已经得所有主流浏览器的支持了。

虽然说这几个函数得到主流浏览器的支持，但要用于实际项目中时，还是需要谨慎，或者说要做好相应的降级处理。比如人肉做降级处理：

.element {
    font-size: 20px;
    font-size: clamp(20px, (1rem + 3vw), 40px)
}

也可以通过@supports来做条件判断：

.element {
    font-size: 20px;
}

@supports (width: min(10px, 3vw)) {
    .element {
        font-size: clamp(20px, (1rem + 3vw), 40px)
    }
}

不过这并不是阻碍我们继续往下阅读的主要原因。

在此之前

熟悉CSS的同学都知道可以使用min-width/height、max-width/height、min-content、max-content等属性来设置容器尺寸，但这些属性并无法用来指定非容器的尺寸，比如字号大小，就没有min-font-size或max-font-size属性。但在CSS的Grid布局中，有另一个函数minmax()更接近我们今天要聊的min()、max()函数。不过，它们还是有着本质上的区别，当你阅读完后面的内容你就会更清楚。

共同的特征

如果你曾使用过minmax()函数的话，该函数能接受两个值，其中之一是最小值，另一个则是最大值。而min()、max()和clamp()函数可以用来比较多个值，并基于所使用的函数，其中一个值会被运用到CSS的属性上（当作属性值）。比如：

width: min(1vw, 4em, 80px)
width: max(1vw, 4em, 80px)
width: clamp(1vw, 4em, 80px)

还可以有更多的值，只需要注意，每个值之间必须使用逗号(,)来分隔：

property: min(value [, value]) || max(value [, value]) || clamp(value [, value])

而且，它们都可以像calc()数学函数，可以使用加、减、乘、除等四则运算的表达式，比如：

font-size: max(10 * (1vw + 1vh) / 2, 12px);
font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);

即：

property: min(expression [, expression]) || max(expression [, expression]) || clamp(expression [, expression])

另外，它们都可以用于以下任何属性中<length>、<frequency>、<angle>、<time>、<percentage>、<number>或者<integer>。

还有就是，它们之间可以相互嵌套，而且还可以和calc()相互嵌套使用：

width: max(200px, min(50%, 1000px));
width: calc(min(800px, 100vw) / 6);

你可能还不知道上面示例代码所表达的含义，但不用着急，随着你继续往下阅读，你会明白它们的含义和所起作用。

语法

min()、max()和clamp()函数有点类似于calc()函数，也称为数学函数（Math Function），允许使用带有加法(+)、减法(-)、乘法(*)和除法(/)的数学表达式作为分量值(Component Values)。min()或max()函数分别表示其包含的最小或最大的逗号分隔计算；clamp()函数表示其中心计算，返回一个区间范围的值(MIN,VAL,MAX)，如果值(VAL)在最小(MIN)和最大值(MAX)区间内，则使用该值(VAL)，如果值(VAL)大于最大值(MAX)，则使用最大值(MAX)，如果值（VAL）小于最小值(MIN)，则使用最小值(MIN)。

它们的具体语法规则如下：

<min()> = min(<calc-sum>#)
<max()> = max(<calc-sum>#)
<clamp()> = clamp(<calc-sum>#3{})

其中<calc-sum>：

<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> = <calc-value> [[ '*' | '/'] <calc-value>]*
<calc-value> = <number> | <dimension> | <percentage> | (<calc-sum>)

此外，+和-操作符的两边都需要有空格，*和/操作符可以在没有空格的情况下使用。