CSS Media Queries

Media queries are the mechanism that makes responsive design possible in CSS: they let you apply a block of styles conditionally, based on characteristics of the device or viewport, most commonly its width. A media query wraps a set of normal CSS rules inside an @media block, and the browser only applies those rules when the specified condition is true.

Media queries can test many features (orientation, resolution, hover capability, and more), but by far the most common use is testing viewport width with min-width and max-width, which is how "breakpoints" are implemented in practice.

Why it matters

Media queries apply styles only when a condition holds, such as the window being at least a certain width. They are how one stylesheet serves a phone and a wide monitor. They also respond to the user's preferences, such as dark mode and reduced motion.

Basic Syntax

A media query looks like @media (condition) { /* rules */ }. The condition is a media feature test, such as (min-width: 768px), and any normal CSS rules inside the block only apply when that condition matches the current viewport. Multiple conditions can be combined with and, and multiple queries can be separated with commas to act as an "or."

min-width vs. max-width

min-width matches when the viewport is at least that wide — this is the basis of mobile-first design, since you write base styles for the smallest screens and add min-width queries to enhance the layout as space increases. max-width matches when the viewport is at most that wide, which is the basis of desktop-first design, where you write base styles for large screens and use max-width queries to simplify the layout as space shrinks. Mixing both philosophies in the same project without a clear convention is a common source of confusing, hard-to-predict CSS.

Other Useful Media Features

Beyond width, media queries can test orientation: portrait / landscape, prefers-color-scheme: dark / light for respecting OS-level dark mode, and prefers-reduced-motion: reduce for respecting a user's request to minimize animation (covered further in the accessibility topic).

Examples

.nav-links {
  display: flex;
  flex-direction: column; /* stacked on small screens */
}

@media (min-width: 768px) {
  .nav-links {
    flex-direction: row; /* side by side once there is enough width */
    gap: 1.5rem;
  }
}

Navigation links stack vertically on narrow screens and switch to a horizontal row with spacing once the viewport reaches 768px or wider.

@media (min-width: 600px) and (orientation: landscape) {
  .hero {
    padding: 4rem 2rem;
  }
}

The hero section receives extra padding only when the viewport is at least 600px wide AND in landscape orientation — both conditions must be true simultaneously.

Exercise

Write the layout mobile-first. By default the three elements in main stack in a column with a 12px gap. From a viewport width of 600px upwards, they sit in a row, centred vertically.

Expected result: a stacked layout in a narrow preview, switching to a single row when the preview is at least 600px wide.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

main {
  /* TODO: a flex column with a 12px gap */
}

/* TODO: from 600px wide, switch to a row, centred vertically */

/* The page contains: <main> with an <h1>, a <p> and a <button> */

main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 600px) {
  main {
    flex-direction: row;
    align-items: center;
  }
}

Quick quiz

Interview questions