clamp() everywhere: fluid sizing without media queries

clamp() recap from B4 — now applied broadly

h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); }
.section { padding: clamp(2rem, 8vw, 6rem); }
.container { width: clamp(320px, 90%, 1200px); }
.gap { gap: clamp(0.5rem, 2vw, 1.5rem); }

Anything that's a LENGTH — font-size, padding, margin, width, gap — can be a clamp(). The middle value is the "preferred" growth curve; the min and max bound it.

The recipe

For "X on small screens, Y on large":

clamp(X, X + (Y-X) * vw_scale, Y)

Or use a calculator (juniorconsult.dev/fluid-calculator) and never math again.

When NOT to use clamp

• When the value MUST be a specific pixel value (borders, focus rings).
• When the value MUST snap to integer pixels (font-size sometimes — sub-pixel rendering inconsistencies on some platforms).
• When the value depends on PARENT width (use @container instead — clamp is viewport-based).

Mix with @container

Inside an @container block, you can still use clamp:

@container (min-width: 400px) {
  .card { padding: clamp(16px, 3cqw, 32px); }   /* cqw = container-query-width */
}

cqw is "container query width unit" — 1cqw = 1% of the container's width. Combine clamp + cqw for the most flexible fluid sizing.