CSS 函数 - max（）

CSS 函数 max（） 允许您从逗号分隔的表达式列表中指定最大（最积极）的值作为 CSS 属性值。

它适用于值 <length>, <frequency>, <angle>, <time>, <percent>, <number> 或 <integer>。

函数 max（） 接受一个或多个逗号分隔的表达式作为参数。其中最大（最正）的表达式值用作属性值。
这些表达式可能包含算术运算、文本值或其他有效参数，例如 attr（）。
它们还可以包含嵌套的 max（）、min（）和 max（）函数。您可以选择为每个值使用不同的单位，并在需要时使用括号来控制计算顺序。

要记住的要点：

对于在表列、列组、行、行组和单元格中使用百分比表示宽度和高度的数学表达式，可以被视为在自动布局表和固定布局表中都指定了 auto 一样。
允许将 min（）和其他 max（）函数嵌套为表达式值。这些表达式是综合数学表达式，允许直接加法、减法、乘法和除法，而无需使用 calc（）函数本身。
表达式可以由包含加法（+）、减法（-）、乘法（*）和除法（/）运算符的值组成，并遵循运算符优先级的标准规则。在 + 和 - 操作数的每一侧都包含一个空格非常重要。表达式中的操作数可以是符合语法的任何值。
将 min（） 和 max（） 值组合在一起或在 clamp（）或 calc（）函数中包含 max（）是可能的，而且通常是必要的。

语法


max( <calc-sum># )

哈希（#）标记乘数表示实体可以重复一次或多次（例如，加号乘数），但每次出现都用逗号（'，'）分隔。

CSS max（） - 字体大小

函数 max（） 可用于启用字体大小增长，同时确保其保持在指定的最小值以上，从而在保持可读性的同时促进响应式字体大小。

以下示例演示了 max（） 的用法。调整浏览器窗口的大小以查看效果。


<html>
<head>
<style>
	 	.text {
	 	 	 font-size: max(16px, 5vw);	
	 	 	 background-color: lightgray;
	 	 	 padding: 20px;
	 	 	 margin: 20px;
	 	}
	 	p {
	 	 	 font-size: max(1em, 5vw);
	 	 	 background-color: yellow;
	 	 	 padding: 20px;
	 	 	 margin: 20px;
	 	}
</style>
</head>
<body>
<div class="text">
This text has a minimum font size of 16px or 5% of the viewport width, whichever is larger.
</div>
<p>This is a sample text with a minimum font size of 1em or 5vw, whichever is larger.</p>
</body>
</html>

打印本页