max()
CSS
function
lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value. The
max()
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 least 400px, but will be wider if the the viewport is more than 2000px wide (in which case 1vw would be 20px, so 20vw would be 400px). Think of the
max()
value as providing the
minimum
value a property can have.
max()
function takes one or more comma-separated expressions as its parameter, with the largest (most positive) expression value used as the value of the property to which it is assigned.
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>
), or nested
min()
and
max()
函数。
You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.
auto
had been specified.
min()
and other
max()
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.
min()
and
max()
values, or use
max()
within a
clamp()
or
calc()
函数。
max( <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> )
Another use case for CSS functions is allow a font size to grow while ensuring it is at least a mimum size, enabling responsive font sizes while ensuring legibility.
Let's look at some CSS:
h1 {
font-size: 2rem;
}
h1.responsive {
font-size: max(4vw, 2em, 2rem);
}
The font-size will at minimum be 2rems, or twice the default size of font for the page. This ensure it is legible and ensures accessibility
<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>
Think of the
max()
function as finding the minimum value allowed for a property.
When
max()
is used for controlling text size, make sure the text is always large enough to read. A suggestion is to use the
min()
function nested within a
max()
that has as its second value a
relative length unit
that is always large enough to read. For example:
small {
font-size: max(min(0.5vw, 0.5em), 1rem);
}
This ensures a minimum size of 1rem , with a text size that scales if the page is zoomed.
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Values and Units Module Level 4
The definition of 'max()' in that specification. |
编者草案 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
<max()>
|
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 |
完整支持
不支持