In this example we have a simple responsive example that makes use of min()
, max()
, and clamp()
for some of the sizes.
The <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.
The <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.
The <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.
HTML
<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>
CSS
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);
}