CSS min()，max() 和 clamp() 函数

min()，max() 和 clamp() 是css 的三个函数，它们的作用都是从其参数中选择一个值作为实际的属性值。

这三个函数可以被用在任何允许<长度>、<频率>、<角度>、<时间>、<百分比>、<数字>或<整数>的地方使用。

min()

min() 函数接受一个或多个以逗号分隔的表达式作为参数，并从参数中选择最小的值作为实际的 CSS 属性值。

签名为：

property: min(expression [, expression]);

/* min() 示例 */
min(100px, 200px);  /* 100px */
min(100px, 200px, 300px); /* 100px */
min(50vw, 200px);  /* screen width > 400px ? 200px : 50vw;  */

min() 的参数也允许是表达式：

min(100px, min(200px, 300px));  /* 100px */

max()

max() 函数接受一个或多个以逗号分隔的表达式作为参数，并参数中选择最大的值作为实际的 CSS 属性值。

签名为：

property: max(expression [, expression]);

/* max() 示例 */
width: max(100px, 200px);  /* 200px */
width: max(100px, 200px, 300px); /* 300px */
width: max(50vw, 200px);  /* screen width > 400px ? 50vw : 200px;  */

max() 的参数也允许是表达式：

width: max(100px, min(200px, 300px));  /* 200px */

clamp()

clamp() 函数允许在定义的最小值和最大值之间的数值范围内选择一个中间值。与 min() 和 max() 不同的是，它接受三个参数: 最小值（MIN）、首选值(VALUE)和最大值(MAX)。

签名为：

property: max(MIN, VALUE, MAX);

如果 VALUE 在 MIN 和 MAX 范围之间，则使用 VALUE 作为函数返回值；如果 VALUE 大于 MAX，则使用 MAX 作为返回值；如果 VALUE 小于 MIN ，则使用 MIN 作为返回值。

clamp(min, value, max)

/* 等价于下面的逻辑 */
if (value < min) return min;
else if (value > max) return max;
else return value;

clamp() 还可以使用组合 min() 和 max() 实现：

clamp(min, value, max)

// 等价于
max(min, min(value, max))

// 也等价于
min(max(min, value), max)

caniuse

• CSS math functions min(), max() and clamp()