min()

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

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% 的较小值，上限为填充或 400 像素宽，以较小者为准。换句话说，标签和输入的最大宽度为 400 像素。它们的最小宽度将是表单宽度的 40%，在智能手表屏幕上，这个宽度非常小。

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

• calc()
• clamp()
• max()
• CSS 值