css:比较函数（min(),max(),clamp()）

CSS 比较函数

根据CSS规范，比较函数是关于比较多个值并取其一。这些CSS函数最大的作用就是可以为我们提供动态布局和更灵活设计组件方法。

Min() 函数

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

例如：设置元素的最大宽度为 500px 。

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

浏览器需要在 (50%, 500px) 取一个最小值，第一个值是指当前视口宽度的50%。如果 50% 的计算大于 500px ，则取 500px ，反之取 50%。

假设当前视口宽度为 900px ，900px X 50% = 450px < 500px ,则元素的最终宽度为 450px 。

 Max() 函数

max() 函数以最大值为返回值，语法跟 min() 函数类似。可以使用 max() 函数为元素设置最小值。

例如：设置元素的最小宽度为 500px。                                                                                                                                                               

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

浏览器需要在 (50%, 500px) 取一个最大值，第一个值是指当前视口宽度的50%。如果 50% 的计算小于 500px ，则取 500px ，反之取 50%。

假设当前视口宽度为 1200px ，1200px X 50% = 600px < 500px ,则元素的最终宽度为 600px 。

 

 Clamp() 函数

clamp() 函数的作用是返回一个区间范围的值。

语法：clamp(MIN, VAL, MAX)

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

例如：有一个元素，最小宽度为 200px ，首选值为 50% ，最大值为 1000px 。

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

}

 

计算过程：

• 宽度永远不会低于 200px
• 首选值是 50% ，只有在视口宽度大于 200px 小于 1000px 时才有效
• 宽度不会超过 1000px