CSS最小值计算函数--min()函数的定义和使用

min()函数可以计算出一系列用逗号分割的参数中的最小值，这些值可以是字面量、数学函数、或其他表达式如calc()函数的计算结果或者var()的自定义属性，并且min()函数的参数可以是不同单位的。可以用来计算长度、角度、频率、时间等数值。与max()函数正好想法。

一、min()函数的语法：

property: min(expression [, expression])

min()函数的参数可以是多个，每个参数使用逗号（,）进行分割，如：

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

上述代码，浏览器会根据当前视口大小，及一个em对应的像素值，将其转化为统一单位后，再取最小值。如视口大小为800px、1em=10px时，则宽度width会取最小值，4em及40px的宽度。

二、min()函数的使用：

思考如下前端切图场景：我们要做一个banner条，在小屏幕设备上显示90%的宽度，但是在大屏幕显示器上（这里指的是宽度大于800px的屏幕，800px×90%=720px），最多只显示720px的宽度。以往这种场景，我们需要借助CSS的媒体查询来实现。随着技术的发展，min()函数就可以很好的解决这个问题，实现代码如下：

HTML代码：

<div class="banner"></div>

CSS代码：

.banner{ width: min(90%,720px); height: 200px; background: pink; margin: 0 auto;}

这样就能实现在PC电脑等设备上最多只能显示720px宽度，但是在手机等小于720px的小屏幕设备上只能显示90%的宽度的banner条了。

上述需求也可用以下CSS代码实现。

.banner { width: 90%; max-width: 720px;}

但是min()函数直接传入多个参数，更加强大和灵活一些。

同样，在制作表单页面的时候，我们也经常会遇到表单因空间不足导致变形或折行等问题。也可以借助min()等CSS计算函数来实现。

三、min()函数使用注意：

1、min()函数直接传入的参数必须有效，比如数值型，比如传入颜色值red，则会报错。如果参数为CSS计算函数时，且该函数计算结果为非数值，则会被忽略。

//传入非数值非函数类型的参数，会报错
.banner{ width: min(90%,red,720px);} // 错误写法
//传入的函数型参数，如计算结果为非数值，会忽略
:root{ --color:red;}
.banner{ width: min(90%,var(--color),720px);}

2、在min()的参数中，可以使用圆括号()嵌套CSS函数，改变计算的优先级。注意：如果要进行加减乘数等数学表达式运算，无需使用calc函数，因为min()函数和calc()的参数都为表达式。但是需要与calc()函数要求的一样，在加减运算时，运算符两边留空白字符。如：

.banner{ width: min(90% - 100px,720px);}

最小值计算的min()函数，相对其他CSS函数来说，还是非常简单的，熟练应用，可以简化很大的工作。

• - - - - - - - -

更多CSS函数的介绍和使用，请移步查看：《CSS函数使用详解》