One function that replaces many media queries.
Direct answer
clamp(min, preferred, max) returns the preferred value, but never smaller than min or larger than max. Use it for fluid font sizes, padding and widths that adapt smoothly to the screen.
Examples
.container {
width: clamp(320px, 90%, 1100px);
padding-inline: clamp(1rem, 4vw, 3rem);
}
h1 {
font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
}
Related functions
width: min(100%, 600px); /* the smaller of two */
width: max(50%, 300px); /* the larger of two */
Tips
- Combine units like
remandvw. - Test the extremes: narrow phones and wide monitors.
Where Teyro fits
Teyro's Responsive Web Design with CSS course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
clamp() makes fluid design simple and readable.
