clamp()
CSS
function
clamps a value between an upper and lower bound.
clamp()
enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The
clamp()
function can be used anywhere a
<length>
,
<frequency>
,
<angle>
,
<time>
,
<percentage>
,
<number>
，或
<integer>
is allowed.
clamp(MIN, VAL, MAX)
is resolved as
max
(MIN,
min
(VAL, MAX))
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.
Note that using
clamp()
for font sizes, as in these examples, allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size or above a maximum font-size. It has the same effect as the code in
Fluid Typography
but in one line, and without the use of media queries.
clamp()
function takes three comma separated expressions as its parameter, in the order of minimum value, preferred value, maximum value.
The minimum value is the smallest (most negative) value. This is the lower bound in the range of allowed values. If the preferred value is less than this value, the minimum value will be used.
The preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values.
The maximum value is the largest (most positive) expression value to which the value of the property will be assigned if the preferred value is greater than this upper bound.
The expressions 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. As math expressions, so you can use addition, subtraction, multiplication and division without using the
calc()
function itself. You may also use parentheses to establish computation order when needed.
You can use different units for each value in your expressions, and different units in any math function making up any of the arguments.
auto
had been specified.
max()
and
min()
functions as expression values, in which case the inner ones are treated as simple parentheses. 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. You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.
min()
and
max()
within a
clamp()
函数。
clamp( <calc-sum>#{3} )where
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
In this example we have a simple responsive example that makes use of
min()
,
max()
，和
clamp()
for some of the sizes.
<body>
element's
width
is set as
min(1000px, calc(70% + 100px))
. This means that the width will be set at
1000px
, unless the result of
calc(70% + 100px)
is less than
1000px
, in which case it will be set to that value instead.
min()
allows you set a maximum value.
<p>
element's
font-size
is set as
max(1.2rem, 1.2vw)
. This means that the
font-size
will be set at
1.2rem
, unless the computed value of
1.2vw
is greater than that of
1.2rem
, in which case it will be set to that value instead.
max()
allows you set a minimum value, which in cases like this is useful for accessibility purposes.
<h1>
element's
font-size
is set as
clamp(1.8rem, 2.5vw, 2.8rem)
. This means that the
font-size
will be set at
1.8rem
, until the computed value of
2.5vw
becomes greater than that of
1.8rem
. At this point,
font-size
will be set at
2.5vw
, until
2.5vw
's computed value becomes greater than that of
2.8rem
. At this point, the
font-size
will be set at
2.8rem
.
clamp()
allows you to set a minimum and maximum value.
You find this example live on GitHub , if you want to play around with it.
<h1>Simple responsive test</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci, eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula. Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis, libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit. Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum. Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.</p> <p>Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem. </p>
html {
font-family: sans-serif;
}
body {
margin: 0 auto;
width: min(1000px, calc(70% + 100px));
}
h1 {
letter-spacing: 2px;
font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}
p {
line-height: 1.5;
font-size: max(1.2rem, 1.2vw);
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Values and Units Module Level 4
The definition of 'clamp()' in that specification. |
编者草案 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
<clamp()>
|
Chrome 完整支持 79 | Edge 完整支持 79 | Firefox 完整支持 75 | IE 不支持 No | Opera 完整支持 66 | Safari 完整支持 13.1 | WebView Android 完整支持 79 | Chrome Android 完整支持 79 | Firefox Android 不支持 No | Opera Android 不支持 No | Safari iOS 完整支持 13.4 | Samsung Internet Android 完整支持 12.0 |
完整支持
不支持