min() - CSS（层叠样式表） 编辑

min() CSS 方法允许你从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。min() 方法可以用于以下任何属性中 <length>, <frequency>, <angle>, <time>, <percentage>,<number>, 或者 <integer>。

/* property: min(expression [, expression]) */
width: min(1vw, 4em, 80px);

在上面的例子中，宽度最多是80px。如果视口的宽度小于800px，或者一个em的宽度小于20px，则会更窄。换句话说，最大宽度是80px，

语法

min() 方法拥有一个或多个逗号分隔符表达式作为参数，表达式的值中最小的值作为参数值。表达式可以是数学函数 (查看 calc() 了解更多), 字面量，或者其他表达式，比如 attr(), 可以求得有效值的的类型 (比如 <length>)。如果你愿意，你甚至可以在表达式中给每个值一个不同的单位。并且在需要的地方只用圆括号改变计算优先级。

注意

• Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.max
• It is permitted to nest max() and other min() functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
• The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any <length> syntax value. You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.
• Oftentimes you will want to comine min() and max() values, or use min() within a clamp() or calc() function.
• You can provide more than two arguments, if you have multiple constraints to apply.

Formal syntax

min( <calc-sum># )
where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
where 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Examples

Growing images to a maximum size

min() 让我们在设置图像的最大宽度时更简单。在下面这个例子中，在小型设备上宽度拉伸为window的一半，但在大型设备上，不超过300px，不使用媒体查询：

.logo {
  width: min(50vw, 300px);
}

<img src="/wiki/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">

在这个例子中，除非视口比 600px 更窄，否则logo的宽会被设置为 300px，到时候，它会随着视口的缩小而缩小，而且总是视口宽度的50%。

给 label 和 input 设置最大值

CSS方法的另一个用途时设置响应式组件（form）的最大尺寸：让 label 和 input 的宽度随着组件的缩小而缩小。

看下面的样式：

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;
}

这里，form 的 margin，border，padding 总是它父元素的宽度的100%。我们声明 input 和 label 的宽度比form的40%还小或者400px宽，只要取决于哪一个最小。换句话说，input 和 label 的最大宽度就是400px，最窄就是form的40%。因此看起来会显得很小。

<form>
  <label>Type something:</label>
  <input type="text">
</form>

Think of the min() function as finding the maximum value allowed for a property.

无障碍问题

当min() 用于控制文本大小时，要保证文本足够大以便于阅读。建议把 min() 方法嵌入到 max() 中， relative length unit 这样就可以便于阅读，比如：

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

这用于保证最小值是1rem，这样在页面缩放时文本也会缩放。

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

说明

Specification	Status	Comment
CSS Values and Units Module Level 4 min()	Editor's Draft	Initial definition.

Browser compatibility

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

See also

• calc()
• clamp()
• max()
• CSS Values