CSS min() 语法
在 CSS 中，min() 函数用于从一组值中取最小值，并将这个最小值作为 CSS 属性的值。
语法：
property: min(value1, value2, ...);说明：
property 是一个 CSS 属性，例如 width、height、font-size 等。value1、value2 等是属性的值。
对于 min() 函数，小伙伴们还需要清楚以下几点。
- min() 函数可以接受多种类型的值，包括：
- 长度（如 100px、10em、50%）。
- 角度（如 30°、0.5rad）。
- 时间（如 2s、500ms）。
- 频率（如 100Hz、2kHz）。
- 数字（无单位的值，例如 2）。
- min() 函数可以接收一个或多个值，不过一般接收两个及以上的值，然后它会从这些值中返回最小的那个。
- min() 函数可以比较不同单位的值，例如百分比与像素。
- min() 函数支持嵌套计算。也就是说，你可以在 min() 中使用另一个 min()。
提示: min() 用于取最小值，而 max() 用于取最大值。
CSS min() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS min() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS min() 函数是如何使用的。
示例 1：min() 基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: min(50%, 400px);
height: 100px;
background-color: lightskyblue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>绿叶网</div>
</body>
</html>页面效果如下图所示。
分析：
width: min(50%, 400px) 会确保 div 元素的宽度为 50% 或 400px 中的较小值。
当我们改变浏览器宽度时，如果浏览器宽度大于 800px，此时 div 的宽度就是 400px；如果浏览器宽度小于等于 800px，此时 div 的宽度就是 50%。
示例 2：min() 结合 calc() 函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
width: 80%;
margin: 0 auto;
background-color: hotpink;
}
aside {
width: min(200px, calc(40% - 20px));
height: 100px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div class="container">
<aside>绿叶网</div>
</div>
</body>
</html>页面效果如下图所示。
分析：
width: min(200px, calc(40% - 20px)) 表示将 aside 元素的宽度为 “200px” 或 “容器宽度的 40% 减去 20px” 中的较小值。
min() 结合 calc() 函数这种方式，非常适合用于实现需要限制最大宽度的自适应布局。
示例 3：min() 实现响应式字体大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
font-size: min(18px, 2vw);
}
div {
font-size: min(1.5rem, 20px);
}
</style>
</head>
<body>
<p>绿叶网</p>
<div>为好教程，全力以赴。</div>
</body>
</html>页面效果如下图所示。
分析：
font-size: min(18px, 2vw) 会确保 body 的字体大小不超过 18px 或 2vw 中的较小值。类似地，div 的字体大小会限制为 1.5rem 或 20px 中的较小值。
示例 4：min() 结合 CSS 媒体查询
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
font-size: min(16px, 1.8vw);
}
@media (max-width: 1200px) {
p {
font-size: min(14px, 1.5vw);
}
}
</style>
</head>
<body>
<p>绿叶网 - 为好教程，全力以赴。</p>
</body>
</html>页面效果如下图所示。
分析：
min(16px, 1.8vw); 表示设置字体大小为 16px 或 1.8vw 中的较小值。然后我们使用 @media 规则实现媒体查询，使得当屏幕宽度小于等于 1200px 时，字体大小调整为 14px 或 1.5vw 中的较小值。
