2020年4月8日，Firefox浏览器支持了 CSS 比较函数（min()，max()，clamp()），这意味着现在所有主流浏览器都支持它们。 这些CSS函数最大的作用就是可以为我们提供动态布局和更灵活设计组件方法。

简单的这些元素主要用来设置元素尺寸，如容器大小，字体大小，内距，外距等等 。在这篇文章中，我将用一些示例和大家一起来探讨这几个函数在实际中的使用，希望能更好的帮助大家理解它们。

兼容性

min 和 max 的支持情况：

clamp()的支持情况：

CSS 比较函数

根据CSS规范，比较函数是关于比较多个值并取其一的操作，我们来研究一下函数。

Min() 函数

min() 函数支持一个或多个表达式，每个表达式之间使用逗号分隔，然后以最小的表达式的值作为返回值，我们可以使用min()为元素设置最大值。

考虑下面的例子，我们希望元素的最大宽度为500px。

.element {
    width: min(50%, 500px);
}

浏览器需要在(50%，500px) 取一个最小值，因为有个百分比，所以最终结果取决于视口宽度。如果50%的计算值大于500px，那么就取 500px。

否则，如果50%计算值小于500px，则50%将用作宽度的值，假设视口的宽度是 900px， 最终元素的宽度为 900px x 50% = 450px。

下面是一个交互的动画为了让大家更好的理解：

事例源码：https://codepen.io/shadeed/debug/f5e338c8a1c7cd29e382c72a5eb37e48/auth

Max() 函数

max()函数和min()函数语法类似，区别在于max()函数返回的是最大值，min()函数返回的是最小值。同样，我们可以使用man()为元素设置最小值。

考虑下面的例子，我们希望元素的最小宽度为500px。

.element {
    width: max(50%, 500px);
}

浏览器需要在(50%，500px) 取一个最大值，因为有个百分比，所以最终结果取决于视口宽度。如果50%的计算值小于500px，那么就取 500px。

否则，如果50%计算值大于500px，则50%将用作宽度的值，假设视口的宽度是 1150px， 最终元素的宽度为 1150px x 50% = 575px。

事例源码：https://cdpn.io/shadeed/debug/cca927df45964fbe1a8342ad3ace6d71

Clamp() 函数

clamp()函数作用是返回一个区间范围的值。语法如下：

clamp(MIN, VAL, MAX)

其中MIN表示最小值，VAL表示首选值，MAX表示最大值。意思是，如果VAL在MIN和MAX范围之间，则使用VAL作为函数返回值；如果VAL大于MAX，则使用MAX作为返回值；如果VAL小于MIN，则使用MIN作为返回值。

clamp(MIN, VAL, MAX)实际上等同于max(MIN, min(VAL, MAX))。

考虑下面的例子

.element {
    width: clamp(200px, 50%, 1000px);
}

假设我们有一个元素，其最小宽度为200px，首选值为50%，最大值为1000px,如下所示：

上面的计算过程是这样的：

• 宽度永远不会低于200px

• 内容中间首选值是50%，只有在视口宽度大于400px小于2000px时才有效

• 宽度不会超过 1000px