Responsive design with media queries

Without one meta tag, many phones lay a page out as if the screen were much wider (MDN gives 980 pixels as an example) and then shrink it, so a media query for phones never runs.

One page, every screen

Responsive design means building one page that adapts to whatever screen it lands on, from a narrow phone to a wide monitor, instead of making a separate mobile site. It rests on three ideas: a layout made of flexible widths instead of fixed ones, media that scale inside their containers, and media queries that adjust the layout at the points where it stops working. Flexbox and grid already do much of the work, as the last two units showed with wrapping cards and auto-fill columns.

The viewport meta tag

Many phones render pages in a virtual viewport wider than the screen, MDN gives 980 pixels as an example, and then shrink the result, because older sites were built for desktops. For a page that is designed to adapt, this gets in the way: a media query that should switch on below 600 pixels never runs, because the browser thinks the screen is 980 pixels wide. <meta name="viewport" content="width=device-width"> in the head tells the browser to use the real width of the device, measured in CSS pixels. Never add user-scalable=no or a low maximum-scale; MDN warns that blocking zoom shuts out people with low vision, and WCAG 1.4.4 expects text to be resizable to 200 percent.

Fluid widths and images

Fixed widths are the most common cause of sideways scrolling on phones. Prefer max-width to width: max-width: 70rem on a page wrapper lets it fill a small screen and stop growing on a large one. Images keep their natural pixel size by default, so a 1200 pixel photo spills out of a 390 pixel screen. img { max-width: 100%; height: auto; } lets images shrink to fit their container while keeping their proportions. WCAG 1.4.10, Reflow, asks that content work at a width of 320 CSS pixels without scrolling in two directions; checking your page in a 320 pixel wide window is a good habit.

Media queries

A media query wraps rules that apply only when a condition is true. @media (min-width: 600px) { ... } applies its rules when the viewport is at least 600 pixels wide. The usual approach is mobile first: write the base styles for a narrow screen, which are often the simplest (one column, everything stacked), and then add min-width queries that rearrange things as space grows. Choose breakpoints where your content starts to look wrong, not by guessing popular device sizes, since new screen sizes appear every year. Writing breakpoints in em, such as 40em, also makes them respond when a reader enlarges the text.

/* Base: one column for narrow screens */
.cols { display: grid; gap: 16px; }

/* From 600px: two columns */
@media (min-width: 600px) {
  .cols { grid-template-columns: 1fr 1fr; }
}

/* From 960px: a sidebar layout */
@media (min-width: 960px) {
  .cols { grid-template-columns: 240px 1fr 1fr; }
}

Other things a query can ask

Media queries can test more than width. The reader preference features come from Media Queries Level 5: (prefers-color-scheme: dark) matches when the reader has chosen a dark theme in the operating system, so you can offer dark colours automatically. (prefers-reduced-motion: reduce) matches when the reader has asked for less motion, often because animation makes them dizzy; turn off large movements and parallax effects inside it. (hover: hover), from Level 4, tells you whether the main pointer can hover, which a touch screen cannot. print styles a page for paper, for example by hiding the menu. Finally, clamp() sizes things smoothly without a query: font-size: clamp(1.5rem, 4vw, 2.5rem) grows with the screen but never goes below 1.5rem or above 2.5rem.