min()

试一试

width: min(50vw, 200px);

width: min(100vw, 4000px);

width: min(150vw, 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>

在第一个例子中，宽度最大为 200px，但如果视口宽度小于 400px（在这种情况下，1vw 等于 4px，所以 50vw 等于 200px），则宽度会更小。此技术使用绝对单位指定属性的固定最大值，并使用相对单位允许值缩小以适应较小的视口。

语法

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

参数

min() 函数将一个或多个逗号分隔的表达式作为其参数，并使用最小（最负）的表达式结果值作为值。

表达式可以是数学表达式（使用算术运算符）、字面值或其他表达式，例如 attr()，它们计算结果为有效的参数类型（例如 <length>）。

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

注意

• 在自动和固定布局的表格中，涉及表格列、列表、行、行组和单元格宽度和高度百分比的数学表达式可能会被视为指定了 auto。
• 允许将 max() 和其他 min() 函数作为表达式值嵌套使用。表达式是完整的数学表达式，因此你可以直接进行加法、减法、乘法和除法，而无需使用 calc() 函数本身。
• 表达式可以是结合了加法（+）、减法（-）、乘法（*）和除法（/）运算符的值，遵循标准的运算符优先级规则。请确保在 + 和 - 操作数两侧加上空格。表达式中的操作数可以是任何 <length> 语法值。
• 你可以（而且经常需要）结合使用 min() 和 max() 值，或者在 clamp() 或 calc() 函数中使用 min()。
• 如果你有多个约束要应用，可以提供两个以上的参数。

正式语法

<min()> = 
  min( <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        

无障碍

使用 min() 设置最大字体大小时，请确保字体仍可缩放至少 200% 以提高可读性（无需辅助技术，如缩放功能）。

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

示例

为标签和输入设置最大尺寸

min() 的另一个用例是为响应式表单控件设置最大尺寸：允许标签和输入的宽度随表单宽度的缩小而缩小。

我们来看一些 CSS

input,
label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}

在这里，表单本身以及边距、边框和内边距将占其父元素宽度的 100%。我们将输入和标签声明为表单宽度（不含内边距）的 40% 或 400px，取两者中较小的一个。换句话说，标签和输入的最宽尺寸是 400px。它们最窄的尺寸是表单宽度的 40%，这在智能手表屏幕上会非常小。

<form>
  <label for="misc">Type something:</label>
  <input type="text" id="misc" name="misc" />
</form>

规范

浏览器兼容性

另见

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