HowToCodePage

Responsive design

Media queries, fluid units, and modern container queries — building layouts that adapt instead of breaking.

Start with the viewport meta

Without this tag, mobile browsers render at roughly 980px wide and zoom out, so none of your media queries fire correctly.

<meta name='viewport' content='width=device-width, initial-scale=1'>

Media queries

/* mobile-first: base styles, then add at wider widths */
.card { padding: 12px; }

@media (min-width: 768px) {
  .card { padding: 24px; }
}

/* combinations */
@media (min-width: 768px) and (max-width: 1023px) { }
@media (prefers-reduced-motion: reduce) { * { animation: none; } }
FeatureTypical use
min-width/max-widthLayout breakpoints
prefers-color-schemeDark mode defaults
prefers-reduced-motionAccessibility: drop animation
pointer: coarseTouch-friendly target sizes
💡
Write mobile-first with min-width. Desktop-first max-width queries stack awkwardly and tend to produce more override code.

Fluid values replace many breakpoints

:root {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}
.wrap { width: min(1200px, 100% - 2rem); margin-inline: auto; }
  • clamp(min, preferred, max) scales between bounds — perfect for type and spacing.
  • min()/max() cap a value without media queries.
  • vw/vh follow the viewport; use dvh on mobile to account for collapsing browser UI.

Container queries

Media queries look at the viewport; container queries look at the parent, which is what a reusable component actually cares about.

.card-wrap { container-type: inline-size; }

@container (min-width: 420px) {
  .card { display: flex; gap: 16px; }
}

FAQ

Which breakpoints should I use?
There is no universal set. Add one exactly where your current layout starts to look wrong, and let content decide — not a table of device widths.
Do I still need a mobile subdomain?
No. Responsive is the standard recommendation; separate mobile sites duplicate maintenance and split signals.

CSS Grid Flexbox

Last refreshed 2026-09-17.