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() - font-size

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>

打印页面