max() 函数是 CSS 中的一种函数，用于返回一组表达式的最大值。这个函数可以用于任何接受长度、百分比或绝对值的属性中。
语法
property: max(value1, value2, ..., valueN);
value1,value2, ...,valueN: 要比较的一组值。这些值可以是长度、百分比、绝对值等。
使用场景
max() 函数在需要根据某些条件来设置元素大小时非常有用。例如，你可以使用它来确保一个元素的宽度不会小于某个最小值。
示例：确保宽度不小于最小值
<div class="box">这是一个盒子</div>
.box {
width: max(200px, 50%);
}在这个例子中，.box 元素的宽度将取 200px 和 50% 中的较大者。如果容器的宽度为 400px，那么 50% 的值将是 200px，因此 .box 的宽度将为 200px。但如果容器的宽度为 600px，那么 50% 的值将是 300px，因此 .box 的宽度将为 300px。
示例：动态调整大小
<div class="dynamic-box">这是一个动态调整大小的盒子</div>
.dynamic-box {
width: max(200px, 10vw);
}在这个例子中，.dynamic-box 元素的宽度将取 200px 和视口宽度的 10% 中的较大者。这意味着随着视口大小的变化，.dynamic-box 的宽度也会相应地调整，但不会小于 200px。
注意事项
max()函数可以接受任意数量的参数。- 参数可以是任何合法的 CSS 长度单位，包括像素 (
px)、百分比 (%)、视口宽度 (vw) 等。 - 如果所有参数都无效，则
max()函数会返回auto或0，具体取决于上下文。
实践案例
案例一：响应式布局
假设你需要创建一个响应式布局，在不同的屏幕尺寸下显示不同的内容宽度。你可以使用 max() 函数来确保内容的最小宽度。
<div class="responsive-box">这是响应式盒子</div>
.responsive-box {
width: max(300px, 90vw);
}在这个例子中，.responsive-box 元素的宽度将取 300px 和视口宽度的 90% 中的较大者。这可以确保即使在较小的屏幕上，盒子的宽度也不会太小，同时在较大的屏幕上也不会超过视口宽度的 90%。
案例二：动态字体大小
在一些情况下，你可能希望根据父元素的大小来动态调整字体大小。使用 max() 函数可以帮助实现这一点。
<div class="dynamic-font">这是动态字体大小的文字</div>
.dynamic-font {
font-size: max(16px, 2vw);
}在这个例子中，.dynamic-font 元素的字体大小将取 16px 和视口宽度的 2% 中的较大者。这样可以确保字体大小在不同设备上都能保持合适的比例。
通过这些示例和实践案例，你可以看到 max() 函数在 CSS 中的强大功能，以及它如何帮助你更灵活地控制元素的尺寸和布局。