Responsive CSS
Two tools, one goal: layouts that work on every screen.
clamp()
Scale a single value — font size, spacing, width — smoothly between a minimum and a maximum. No breakpoints needed.
Fluid values@media
Change layout structure at specific breakpoints — number of columns, navigation shape, element visibility.
Layout structureCombining
Use clamp() for values that scale smoothly. Use @media for structure that changes. Use both on real components.
Best practiceThe one rule
clamp() is for values that scale gradually — font size, padding, gap.
@media is for structure that changes — columns, flex direction, visibility.