max()

试一试

width: max(20vw, 400px);

width: max(20vw, 100px);

width: max(5vw, 100px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <img
      alt="Firefox logo"
      class="logo"
      src="/shared-assets/images/examples/firefox-logo.svg" />
  </div>
</section>

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

语法

max(1, 2, 3)
max(1px, 2px, 3px)

参数

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() 函数，并将其第二个值设置为 相对长度单位，该单位始终足够大以便阅读。例如：

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

这确保了最小尺寸为 1rem，并且文本大小在页面缩放时也能随之缩放。

• MDN 理解 WCAG，指南 1.4 解释
• 理解成功标准 1.4.4 | W3C 理解 WCAG 2.0

示例

设置字体的最小尺寸

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

我们来看一些 CSS

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

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

<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() 函数视为找到属性允许的最小值。

规范

浏览器兼容性

另见

• calc()
• clamp()
• min()
• 学习：值和单位