CSS函数min()、max()与clamp()

随着响应式设计的发展且日益细化，CSS本身也在不断发展，对于我们而言归功于现代浏览器的支持。下面来了解如何使用这些受支持的CSS函数控制元素的大小进而满足在实际项目中的应用。

一、calc() 函数

---

calc() 函数用于动态计算长度值

1. 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
2. 任何长度值都可以使用calc()函数进行计算；
3. calc()函数支持 “+”, “-”, “*”, “/” 运算；
4. calc()函数使用标准的数学运算优先级规则；

e.g.: width: calc(100% - 80px);

注：+和- 运算符的两边必须要有空白字符。* 和 / 这两个运算符前后不需要空白字符，但若为了保持统一，加上也无妨。
其表达式也是支持嵌套的（e.g. : calc( calc( 100px / 2) / 2)）。

二、min()函数

---

min() CSS 方法允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。

e.g.: width: min(50%, 600px);

示例：

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

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

三、max()函数

---

max() CSS 方法允许你从逗号分隔符表达式中选择一个最大值作为 CSS 的属性值，与上述min()相反。

e.g.: width: max(50%, 600px);

示例：

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

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

四、Clamp() 函数

---

clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。

e.g.: clamp(400px, 50%, 600px);

示例：

1. 宽度不会低于400px；
2. 内容中间首选值是50%，只有在视口宽度大于400px小于600px时才有效；
3. 宽度不会超过600px。

五、总结

---

关于CSS min()、max()与clamp() 函数看上去还是蛮强大的，我们可以借助它们在Web端构建响应式效果。