Why Responsive Design Matters: Viewport & Mobile-first Strategy

Responsive design means building a single page that adapts its layout to whatever screen size views it — a phone, a tablet, a laptop, or a large desktop monitor — rather than building separate sites for each.

A foundational requirement, without which nothing else in this chapter works correctly, is the viewport meta tag in the HTML <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without it, mobile browsers render pages at a fixed desktop-like width (often 980px) and zoom out, making everything tiny regardless of how well the CSS handles small screens.

Mobile-first vs desktop-first are the two common strategies:

/* Mobile-first: base styles target small screens, then scale UP */
.card { width: 100%; }

@media (min-width: 768px) {
  .card { width: 50%; }
}

/* Desktop-first: base styles target large screens, then scale DOWN */
.card { width: 50%; }

@media (max-width: 767px) {
  .card { width: 100%; }
}

Mobile-first (using min-width queries) is generally recommended: it forces you to prioritize essential content first, and tends to produce simpler, more maintainable CSS since additions layer on top of a solid base rather than overriding a complex one.

Beyond media queries, flexible units (%, fr, rem) and modern layout tools (Flexbox, Grid) do much of the responsive work automatically, meaning fewer media query breakpoints are typically needed than beginners expect.