The 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>
, or <integer>
is allowed.
/* property: max(expression [, expression]) */ width: max(1vw, 4em, 80px);
In the above example, the width will be at least 80px, but will be wider if the the viewport is more than 800px wide, or an em is more than 20px wide. In other words, the min-width is 80px. Think of the max() value as providing the minimum value a property can have, realizing this, at first, sounds conter-intuitive.
The 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 expresstions can be math functions (see calc()
for more information), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like <length>
), or nested min()
and max()
functions.
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()
function.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> )
max()
makes it easy to set a minimum width for an image. In this example, the CSS creates a logo that stretches half way across the window on larger devices, but does not not exceed 300px on wider devices, without the use of media queries:
.logo { width: max(50vw, 300px); }
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
In this example, the logo will be at least 300px wide, but wider if the viewport grows above 600px, at which point it will grow as the viewport grows, always being 50% of the width of the viewport.
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.
TBD
Specification | Status | Comment |
---|---|---|
CSS Values and Units Module Level 4 The definition of 'max()' in that specification. | Editor's Draft | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | ? | ? | ? | ? | ? | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | ? | ? | ? | ? | ? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/max