Responsive CSS
( )

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 structure
+

Combining

Use clamp() for values that scale smoothly. Use @media for structure that changes. Use both on real components.

Best practice

The one rule

clamp() is for values that scale gradually — font size, padding, gap.
@media is for structure that changes — columns, flex direction, visibility.