CSS max() 语法
在 CSS 中，max() 函数用于从一组值中取最大值，并将这个最大值作为 CSS 属性的值。
语法：
property: max(value1, value2, ...);说明：
property 是一个 CSS 属性，例如 width、height、font-size 等。value1、value2 等是属性的值。
对于 max() 函数，小伙伴们还需要清楚以下几点。
- max() 函数可以接受多种类型的值，包括：
- 长度（如 100px、10em、50%）。
- 角度（如 30°、0.5rad）。
- 时间（如 2s、500ms）。
- 频率（如 100Hz、2kHz）。
- 数字（无单位的值，例如 2）。
- max() 函数接受一个或多个值，不过一般用于比较两个以上的值，然后它会从这些值中返回最大的那个。
- max() 函数可以比较不同单位的值，例如百分比与像素。
- max() 函数支持嵌套计算。也就是说，你可以在 max() 中使用另一个 max()。
提示: max() 用于取最大值，而 min() 用于取最小值。
CSS max() 摘要
| 属于 | CSS 函数 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS max() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS max() 函数是如何使用的。
示例 1：max() 用于响应式设计
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: max(50%, 300px);
height: 100px;
line-height: 100px;
border: 1px solid hotpink;
background-color: lightskyblue;
text-align: center;
}
</style>
</head>
<body>
<div>绿叶网</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，div 元素的宽度被设置为 max(50%, 300px) 。也就是说，div 的宽度将是 50% 和 300px 中的最大值。
当改变浏览器尺寸时，div 元素的宽度会根据这两个值进行自动调整，从而实现响应式布局。
- 如果浏览器尺寸的 50% 大于 300px，此时 div 元素的宽度就是浏览器尺寸的 50%。
- 如果浏览器尺寸的 50% 小于 300px，此时 div 元素的宽度就是 300px。
示例 2：max() 结合 calc()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
width: 80%;
margin: 0 auto;
background-color: hotpink;
}
aside {
/* 宽度至少为 100px，同时占据容器剩余空间的 30% */
width: max(100px, calc(30% - 20px));
height: 100px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div class="container">
<aside>绿叶网</aside>
</div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们将 aside 元素的宽度设置为 max(100px, calc(30% - 20px))。此时该元素的宽度是以下两者中的较大值：
- 100px。
- 容器宽度的 30% 减去 20px。
这个技巧在实际开发中非常有用，它既可以保证元素具有最小的宽度，又可以实现宽度自适应。
示例 3：max() 用于调整字体大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
font-size: max(16px, 1.2rem);
}
p {
font-size: max(1em, 20px);
}
</style>
</head>
<body>
<div>绿叶网</div>
<p>为好教程，全力以赴</p>
</body>
</html>页面效果如下图所示。
分析：
在 body 元素中，font-size 被设置为 max(16px, 1.2rem)。这样可以确保字体大小至少为 16px，但如果 1.2rem 计算出的值大于 16px，那么将会使用计算值。
同样地，p 元素的字体大小被设置为 max(1em, 20px)，它可以确保字体大小至少为 20px。
示例 4：max() 函数结合媒体查询
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
font-size: max(16px, 2vw); /* 最小 16px，或者 2vw，取较大者 */
}
@media (max-width: 1200px) {
p {
font-size: max(18px, 1.5vw); /* 屏幕小于等于 1200px 时，最小 18px，或者 1.5vw */
}
}
</style>
</head>
<body>
<p> 绿叶网 - 为好教程，全力以赴。</p>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们将 max() 函数与 CSS 媒体查询 结合一起使用，以实现更精细的响应式排版。
- 默认情况下，p 元素的字体大小为 max(16px, 2vw)。这表示 p 元素的字体大小在 16px 和 2vw 中取较大者，从而确保字体在视口宽度较小时至少有 16px。
- 当视口宽度小于或等于 1200px 时，@media 规则中的样式生效，将 p 元素的字体大小设置为 max(18px, 1.5vw)。此时，p 元素的字体大小在 18px 和 1.5vw 中取较大者。
