Resize your browser window to see how clamp(min, preferred, max)
fluidly scales values between a minimum and maximum. No media queries needed!
This text scales smoothly between 0.9rem and 1.1rem, using
clamp(0.9rem, 1vw + 0.8rem, 1.1rem). It never gets too small
or too large, adapting perfectly to any screen size.
Padding and font size inside these cards also use clamp().
Try resizing your browser to see the smooth transitions.
No jarring breakpoints—just fluid, responsive design.
This bar's height uses clamp(20px, 5vw, 50px):
clamp(1rem, 5vw, 3rem)clamp(1.5rem, 4vw + 1rem, 3.5rem)clamp(300px, 90%, 1200px)clamp(8px, 2vw, 16px)