Modern Responsive Sizing With clamp, min and max

Breakpoints create sudden jumps. Modern CSS math functions — <code>clamp()</code>, <code>min()</code> and <code>max()</code> — let sizes flow smoothly between limits, so designs scale continuously with no jarring steps and far fewer media queries.

min() and max()

<code>min(a, b)</code> returns the smaller value; <code>max(a, b)</code> the larger. The classic use: <code>width: min(100%, 800px)</code> means "100% on small screens, but never wider than 800px" — a fluid container in one line.

<div class="box">width: min(100%, 400px)</div>

.box{width:min(100%,400px);background:#2563eb;color:#fff;padding:16px;border-radius:8px}

clamp(): the fluid powerhouse

<code>clamp(min, preferred, max)</code> gives a value that scales with the preferred (usually viewport-relative) value but never below min or above max. It is the single best tool for fluid typography.

<h1 class="t">Fluid heading</h1><p class="p">Body that scales gently.</p>

.t{font-size:clamp(1.6rem,5vw,3rem);margin:0 0 8px}
.p{font-size:clamp(1rem,2.5vw,1.25rem);color:#475569}

A fluid type scale

Define your headings and body once with clamp() and they all scale together across every screen — no breakpoints, no font-size media queries. Pair this with fluid spacing (e.g. <code>padding: clamp(1rem, 4vw, 3rem)</code>) for sections that breathe on large screens and stay tight on phones.

Fluid gaps and spacing

.section {
  padding-block: clamp(2rem, 6vw, 6rem);
}
.grid {
  gap: clamp(1rem, 3vw, 2rem);
}

h1 { font-size: 5vw; }

h1 { font-size: clamp(1.6rem, 5vw, 3rem); }