0
Responsive Design · Advanced Responsive
New technique
clamp(): fluid, with limits
Why hop between fixed sizes at breakpoints when the size can glide smoothly between a floor and a ceiling?
With media queries, a heading jumps from one size to the next at each breakpoint. clamp(MIN, PREFERRED, MAX) lets it grow smoothly with the screen instead: the browser uses the preferred value, but never goes below MIN or above MAX.
To work it out, compute the preferred value first, then check it against the limits. With clamp(200px, 50vw, 600px) on a 1000px screen, 50vw is 500px: in range, so 500px.
Mix rem into the preferred value, like 1rem + 3vw. A size in vw alone ignores the user's zoom and font settings; the rem part keeps responding to them.
h1 {
font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
}- The order is always minimum, preferred, maximum.