Media Queries

`@media` rules apply CSS only when a condition matches — most commonly viewport width.

4 min read Level 2/5 #css#media-queries#responsive

What you'll learn

Write `min-width` and `max-width` queries
Query other media features (motion, color scheme, hover)
Pick sensible breakpoints

@media is the OG responsive tool. Rules inside the block apply only when the condition is true.

Width Breakpoints

.layout {
  display: grid;
  grid-template-columns: 1fr;       /* mobile default */
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 250px 1fr;   /* tablet+ */
  }
}

@media (min-width: 1200px) {
  .layout {
    grid-template-columns: 250px 1fr 300px;   /* desktop */
  }
}

Pick a Few Breakpoints, Not Many

Common breakpoints (Tailwind’s, roughly):

640px — large phone / small tablet
768px — tablet
1024px — laptop
1280px — desktop

You don’t have to use these specifically. Pick by where YOUR design breaks, not arbitrary device widths.

Beyond Width

@media supports lots of features:

Feature	Matches when…
`(min-width: ...)` / `(max-width: ...)`	Viewport width
`(orientation: portrait)`	Height > width
`(prefers-color-scheme: dark)`	User prefers dark mode
`(prefers-reduced-motion: reduce)`	User has motion sensitivity
`(prefers-contrast: more)`	User wants higher contrast
`(hover: hover)`	Device has a real hover (mouse, not touch)
`(pointer: fine)`	Mouse-like pointer
`print`	Print preview / actual printing

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; --bg: #111; --text: #eee; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Combining Conditions

@media (min-width: 768px) and (orientation: landscape) { … }
@media (prefers-color-scheme: dark), (prefers-contrast: more) { … }

and for “both”, comma for “or”.

Range Syntax (Modern)

@media (768px <= width) { … }                  /* equivalent to min-width: 768px */
@media (768px <= width <= 1199px) { … }         /* between */

Cleaner than the legacy min-width / max-width chains.

Up Next

Mobile-first — the design philosophy that makes breakpoints manageable.

Mobile First →