max()

基线 广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本中使用。它自以下时间以来在浏览器中可用 2020 年 7 月.

max() CSS 函数 允许您将逗号分隔的表达式列表中最大的（最正）值设置为 CSS 属性值的属性值。max() 函数可以在允许使用 <length>、<frequency>、<angle>、<time>、<percentage>、<number> 或 <integer> 的任何地方使用。

试一试

在上面显示的第一个示例中，宽度将至少为 400px，但如果视口宽度超过 2000px，则宽度会更宽（在这种情况下，1vw 将为 20px，因此 20vw 将为 400px）。此技术使用绝对单位为属性指定固定的最小值，并使用相对单位允许该值增长以适应更大的视口。

语法

max() 函数将其参数作为一个或多个逗号分隔的表达式，其中最大的（最正）表达式值用作分配给它的属性的值。

表达式可以是数学表达式（使用算术运算符）、字面值或其他表达式，例如 attr()，这些表达式计算为有效的参数类型（如 <length>），或嵌套的 min() 和 max() 函数。

您可以为表达式中的每个值使用不同的单位。您也可以在需要时使用括号来确定计算顺序。

注释

  • 涉及表格列、表格列组、表格行、表格行组和表格单元格中宽度和高度的百分比的数学表达式，在自动和固定布局表格中可能会被视为已指定了auto。
  • 允许将min()和其他max()函数嵌套为表达式值。表达式是完整的数学表达式，因此您可以在不使用calc()函数本身的情况下使用直接加法、减法、乘法和除法。
  • 表达式可以是结合加法 ( + )、减法 ( - )、乘法 ( * ) 和除法 ( / ) 运算符的值，使用标准运算符优先级规则。确保在 + 和 - 操作数的两侧都留有空格。表达式中的操作数可以是任何 <length> 语法值。
  • 您可以（并且通常需要）组合min()和max()值，或在clamp()或calc()函数中使用max()。

正式语法

<max()> = 
  max( <calc-sum># )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

无障碍访问

当max()用于控制文本大小时，请确保文本始终足够大以供阅读。建议在具有第二个值为始终足够大以供阅读的 相对长度单位 的 max() 中嵌套使用 min() 函数。例如

css
small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}

这确保了1rem的最小大小，如果页面被缩放，文本大小也会随之缩放。

示例

设置字体的最小大小

max() 的另一个用例是允许字体大小增长，同时确保它至少为最小大小，从而实现响应式字体大小，同时确保易读性。

让我们看看一些 CSS

css
h1 {
  font-size: 2rem;
}
h1.responsive {
  font-size: max(4vw, 2em, 2rem);
}

字体大小至少为 2rems，或页面字体默认大小的两倍。这确保了它的易读性和可访问性。

html
<h1>This text is always legible, but doesn't change size</h1>
<h1 class="responsive">
  This text is always legible, and is responsive, to a point
</h1>

将max()函数视为查找属性允许的最小值。

规范

规范
CSS 值和单位模块 Level 4
# calc 表示法

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅