Three small functions that give CSS some logic.
Direct answer
min() returns the smallest value, max() the largest and clamp() keeps a value between a minimum and maximum. Use them to create flexible widths and spacing without media queries.
Examples
.box {
width: min(100%, 600px); /* never wider than 600px */
}
.sidebar {
width: max(240px, 20%); /* at least 240px */
}
.title {
font-size: clamp(1.5rem, 4vw, 3rem);
}
Quick guide
| Function | Think of it as |
|---|---|
min(a, b) | a ceiling |
max(a, b) | a floor |
clamp(a, b, c) | floor, target and ceiling |
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
Fewer media queries, more fluid layouts.
