Responsive Design Patterns

Responsive Design Patterns (Verbose)

Core Patterns

Mobile-First Is a CSS Volume Argument

Both directions produce working layouts, but very different amounts of CSS.

/* ✅ mobile-first: each query ADDS */
.sidebar { display: none; }
.content { padding: 1rem; }

@media (min-width: 64rem) {
  .sidebar { display: block; width: 16rem; }
  .content { padding: 2rem 3rem; }
}

/* ❌ desktop-first: each query UNDOES */
.sidebar { display: block; width: 16rem; float: left; }
.content { padding: 2rem 3rem; margin-left: 16rem; }

@media (max-width: 64rem) {
  .sidebar { display: none; width: auto; float: none; }   /* three resets */
  .content { padding: 1rem; margin-left: 0; }             /* two more */
}

The desktop-first version must neutralize every property it set, and each reset is itself a rule someone will later override. Mobile-first also leaves the simplest layout as the unconditional base — what renders if a query never matches.

Express breakpoints in rem, not px: a min-width: 48rem query moves with the user's root font size, so a user at 24px base text doesn't get a cramped multi-column layout. And derive the values from where your content breaks — resize until it looks wrong, put a breakpoint there — not from a device list that goes out of date every year.

Container Queries Solve What Media Queries Cannot

A media query asks "how wide is the viewport?" A component's correct layout depends on how wide it is — and those are unrelated whenever the component appears in more than one region.

.card-area { container-type: inline-size; container-name: card; }

.card { display: block; }                    /* stacked by default */

@container card (min-width: 30rem) {
  .card { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; }
}

Now the same .card renders stacked in a 280px sidebar and horizontal in an 800px main column — same viewport, same moment. With media queries this needs either a viewport-plus-region selector matrix (.sidebar .card, .main .card, each with its own breakpoints) or duplicated components. Both scale badly and break the moment someone drops the card in a new region.

Use media queries for the page shell (does the sidebar exist?) and container queries for everything inside components. Note that container-type: inline-size applies containment — apply it to a wrapper, not to an element whose height you depend on.

Container query units (cqi, cqw) let internal sizing scale with the container too: font-size: clamp(1rem, 0.9rem + 1.5cqi, 1.5rem).

Intrinsic Layouts

Many layouts need no breakpoints at all — let the algorithm respond.

/* Responsive grid, no media queries */
.auto-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* Sidebar that wraps when the main column would get too narrow */
.with-sidebar { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.with-sidebar > .side { flex: 1 1 16rem; }
.with-sidebar > .main { flex: 999 1 30rem; }   /* huge grow: wins until it can't fit */

The min(20rem, 100%) matters: a bare minmax(20rem, 1fr) overflows whenever the container is narrower than 20rem — exactly the mobile case. auto-fit collapses empty tracks so items stretch to fill the row; auto-fill keeps them, preserving column rhythm. Gallery: auto-fit. Dashboard: auto-fill.

Fluid Typography and Spacing

:root {
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --space-fluid-md: clamp(1rem, 0.8rem + 1vw, 2rem);
}
h2 { font-size: var(--step-2); }
section { padding-block: var(--space-fluid-md); }

The middle term must include a rem component. clamp(1rem, 4vw, 2rem) looks fine until a user zooms: viewport units don't scale with zoom the way text does, so the size stays pinned and fails WCAG 1.4.4 (resize text to 200%).

Cap measure for readability (.prose { max-width: 65ch; }) rather than reaching for another breakpoint.

Images

<img src="/hero-800.jpg"
     srcset="/hero-400.jpg 400w, /hero-800.jpg 800w, /hero-1600.jpg 1600w"
     sizes="(min-width: 64rem) 50vw, 100vw"
     width="1600" height="900" alt="..." loading="lazy" decoding="async">

srcset + sizes lets the browser pick by width and device pixel ratio. The width/height attributes let it reserve the correct box before load — omitting them is the most common source of layout shift, and CSS aspect-ratio serves the same purpose for CSS-sized media. Never set loading="lazy" on the LCP image; it delays the very thing being measured.

Input Modality

@media (hover: hover) and (pointer: fine) { .row:hover .row__actions { opacity: 1; } }
@media (pointer: coarse) {
  .row__actions { opacity: 1; }        /* always visible for touch */
  .btn { min-height: 2.75rem; }        /* comfortable touch target */
}

Screen width is not input type: touchscreen laptops are wide and coarse, a phone with a stylus is narrow and fine. Query the capability directly, and pair it with a prefers-reduced-motion: reduce block neutralizing non-essential animation.

Viewport Units on Mobile

Use min-height: 100dvh for full-height panels, not 100vh.

100vh is sized against the largest viewport — the one with browser chrome retracted — so a full-height element is taller than the visible area while the address bar is showing, and its bottom is cut off. dvh tracks the dynamic viewport; svh and lvh give the small and large extremes when you need a stable value. Combine with env(safe-area-inset-*) so content clears notches.

Common Anti-Patterns

❌ Device-named breakpoints — @media (max-width: 375px) /* iPhone */ is obsolete on release day. ✅ Breakpoints derived from where the content stops working.

❌ Desktop-first max-width chains — every rule needs an undo. ✅ Mobile-first min-width, additive only.

❌ Viewport queries for component internals — the component works in one region and breaks in every other. ✅ container-type: inline-size on the wrapper, @container inside.

❌ minmax(20rem, 1fr) without a min() guard — overflow below 20rem. ✅ minmax(min(20rem, 100%), 1fr).

❌ Pure vw font sizing — text stops responding to zoom, failing WCAG 1.4.4. ✅ clamp() with a rem term in the fluid middle.

❌ display: none to "make it responsive" — mobile users lose functionality instead of getting a different arrangement. ✅ Reflow, collapse into a disclosure, or move into a bottom sheet.

❌ Hover-revealed actions with no coarse-pointer path — unreachable on touch. ✅ Gate on (hover: hover) and provide a persistent alternative.

❌ 100vh full-height panels on mobile — clipped under browser chrome. ✅ 100dvh, plus safe-area insets.

❌ Images without intrinsic dimensions — layout shift on every load. ✅ width/height attributes or aspect-ratio.

Responsive Design Checklist

• Base styles are the smallest layout; queries only add
• Breakpoints in rem, chosen from content, not devices
• Component-internal adaptation uses container queries
• container-type applied to a wrapper, not a height-critical element
• Grids use auto-fit/auto-fill with a min() overflow guard
• Fluid type via clamp() with a rem term in the middle
• Line length capped (~65ch) for prose
• Images use srcset + sizes and declare intrinsic dimensions
• LCP image not lazy-loaded
• Hover affordances gated on (hover: hover); touch targets ~44px on coarse
• 100dvh used instead of 100vh; env(safe-area-inset-*) on edge UI
• prefers-reduced-motion honored
• No horizontal scroll at 320px; layout verified at 200% zoom
• Nothing essential removed at small widths — only rearranged