min()
CSS
function
lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The
min()
function can be used anywhere a
<length>
,
<frequency>
,
<angle>
,
<time>
,
<percentage>
,
<number>
，或
<integer>
is allowed.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
In the first above example, the width will be at most 200px, but will be smaller if the viewport is less than 400px wide (in which case 1vw would be 4px, so 50vw would be 200px). In other words, the maximum width is 200px. Think of the
min()
value as providing the
maximum
value a property can have.
min()
function takes one or more comma-separated expressions as its parameter, with the smallest (most negative) expression value result used as the value.
The expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as
attr()
, that evaluate to a valid argument type (like
<length>
).
You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.
auto
had been specified.
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.
<length>
syntax value.
min()
and
max()
values, or use
min()
within a
clamp()
or
calc()
函数。
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> )
当使用
min()
to set a maximum font size, ensure that the font can still be scaled at least 200% for readability (without assistive technology like a zoom function).
Another use case for CSS functions is to set a maximum size on responsive form controls: enabling the width of labels and inputs to shrink as the width of the form shrinks.
Let's look at some 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;
}
Here, the form itself, along with the margin, border, and padding, will be 100% of its parent's width. We declare the input and label to be the lesser of 40% of the form width up to the padding or 400px wide, whichever is smaller. In other words, the widest that the label and input can be is 400px. The narrowest they will be is 40% of the form's width, which on a smartwatch's screen is very small.
<form> <label>Type something:</label> <input type="text"> </form>
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Values and Units Module Level 4
The definition of 'min()' in that specification. |
编者草案 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
<min()>
|
Chrome 完整支持 79 | Edge 完整支持 79 | Firefox 完整支持 75 | IE 不支持 No | Opera 完整支持 66 | Safari 完整支持 11.1 | WebView Android 完整支持 79 | Chrome Android 完整支持 79 | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 完整支持 11.3 | Samsung Internet Android 完整支持 12.0 |
完整支持
不支持