CSS's clamp(), min(), and max() functions let a value scale fluidly based on the viewport, without writing a single media query. They're most famous for fluid typography — a heading that smoothly grows and shrinks with the screen instead of jumping between fixed sizes at each breakpoint.

min() and max()

min() picks whichever of its arguments is smallest; max() picks whichever is largest. This is useful for capping or flooring a value that would otherwise be unbounded.

.container {
  /* never wider than 1100px, but shrinks below that on small screens */
  width: min(1100px, 100%);
}

On a wide screen, 100% would exceed 1100px, so min() picks 1100px — the container stops growing past that cap. On a narrow screen, 100% is smaller than 1100px, so min() picks 100% instead, letting the container shrink to fit. One line replaces what used to need a fixed max-width plus a separate width: 100% fallback.

clamp() — The Combination of Both

clamp(min, preferred, max) takes three values: a floor, an ideal value that scales, and a ceiling. The browser uses the preferred value as long as it stays between the min and max, and clamps to whichever bound it would otherwise cross.

h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem);
}

Here the heading's font size is normally 4vw + 1rem — a value tied directly to viewport width, so it grows and shrinks continuously as the window resizes. But it will never go below 1.75rem on tiny screens, and never above 3.5rem on huge ones. The result is a heading that resizes smoothly with the browser window instead of snapping abruptly at breakpoints, the way a handful of @media-based font sizes would.

Why This Beats Multiple Media Queries

A traditional approach might define three or four fixed font sizes across different media query breakpoints. That works, but the text visibly jumps in size the instant the viewport crosses each breakpoint. clamp() interpolates continuously between its bounds, so there's no visible "jump" at all — just smooth scaling, with one line of CSS instead of four separate rules.

Beyond Typography

clamp() isn't limited to font sizes — it works for any length value: padding, margin, width, gap. A section's padding can scale fluidly with the viewport the same way:

.section {
  padding: clamp(1rem, 5vw, 4rem);
}

This keeps spacing proportional on every screen size, from a tight 1rem on small phones up to a generous 4rem on large desktops, without a single breakpoint to maintain. It's an excellent complement to the structural breakpoints used in mobile-first design — use fluid values like this for things that should scale continuously, and media queries for layout changes that need to happen at a specific point.