🎚️ Media Queries and Breakpoints

What Media Queries Do

A media query is a conditional wrapper around a block of CSS. It reads, in plain English: "If the device matches these conditions, apply these rules." Everything outside the query is the baseline that always applies; the query only adds or overrides rules when its condition is true.

Syntax & Features

A media query is built from an optional media type, one or more feature tests joined by logical operators, and a block of CSS.

@media screen and (min-width: 768px) {
  /* Applies to screens 768px wide and up */
  .container { max-width: 750px; }
}

Common media types

• all — every media type (the default if you omit it)
• screen — monitors, tablets, phones
• print — printers and print preview

Common media features

/* Old */
@media (min-width: 768px) and (max-width: 1023px) { ... }

/* New range syntax — same meaning, clearer intent */
@media (768px <= width < 1024px) { ... }

Worked Examples

Width-based adaptation

/* Base (mobile) styles apply everywhere first */
.sidebar { display: none; }

/* On wider screens, reveal the sidebar */
@media (min-width: 768px) {
  .sidebar { display: block; width: 25%; }
  .content { width: 75%; }
}

Adapting to input type

Touch users need bigger tap targets than mouse users. The pointer feature lets you serve each appropriately.

/* Precise pointer (mouse): compact controls are fine */
@media (pointer: fine) {
  .button { padding: 6px 12px; }
}

/* Coarse pointer (touch): enlarge to a comfortable tap target */
@media (pointer: coarse) {
  .button { padding: 14px 22px; } /* ~44px tall */
}

Print styles

@media print {
  nav, footer, .comments { display: none; }   /* strip screen-only chrome */
  body { font-size: 12pt; color: #000; }
  a[href]::after { content: " (" attr(href) ")"; } /* show URLs on paper */
}

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

Choosing Breakpoints

A breakpoint is simply the width where you decide the layout should change. There are two schools of thought about where to put them.

The content-based approach wins: start from your base design, slowly widen the browser, and add a breakpoint at each point where the layout starts to look stretched, cramped, or awkward. Your breakpoints then belong to your content, not to a device catalog that changes every year.

Common Patterns

Mobile-first (min-width) — the default

Write the simplest mobile layout as the base, then layer enhancements upward. This keeps the base lightweight and is the pattern we recommend throughout this course.

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

/* Enhancement: go horizontal on larger screens */
@media (min-width: 768px) {
  .navigation { flex-direction: row; }
}

Desktop-first (max-width) — use sparingly

/* Base: full desktop layout */
.navigation { display: flex; flex-direction: row; }

/* Override downward for small screens */
@media (max-width: 767px) {
  .navigation { flex-direction: column; }
}

Multi-column to single-column grid

.grid { display: grid; grid-template-columns: 1fr; }        /* mobile: 1 col */
@media (min-width: 768px) { .grid { grid-template-columns: 1fr 1fr; } }        /* tablet: 2 */
@media (min-width: 992px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }    /* desktop: 3 */

Modern Queries

Container queries

A media query asks about the viewport. A container query asks about a component's own parent — so a card can lay itself out differently in a narrow sidebar than in a wide main column, on the same page. This is now supported across all evergreen browsers.

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

/* When the WRAPPER (not the screen) is at least 400px wide */
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: auto 1fr; }
}

Feature queries with @supports

Media queries test the device; @supports tests the browser's CSS capabilities, so you can progressively enhance without breaking older engines.

.layout { display: block; }               /* safe fallback */
@supports (display: grid) {
  .layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

User-preference queries

@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #f0f0f0; }
}

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

Debugging

Browser DevTools make breakpoints visible. In the device toolbar (Ctrl/Cmd + Shift + M), a ruler across the top shows your defined breakpoints as clickable segments, and the Styles pane highlights which @media block is currently active.

For quick visual confirmation during development, a temporary label that changes per breakpoint tells you at a glance which query is live:

body::before {
  content: "mobile";
  position: fixed; top: 0; right: 0; z-index: 9999;
  padding: 4px 8px; background: crimson; color: #fff; font: 12px monospace;
}
@media (min-width: 768px) { body::before { content: "tablet";  background: royalblue; } }
@media (min-width: 992px) { body::before { content: "desktop"; background: seagreen;  } }

Hands-on Exercise

/* Base: mobile, single column */
.layout { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.cards  { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.nav-menu { display: none; }
.nav-toggle { display: block; }

/* Tablet */
@media (min-width: 768px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .nav-menu { display: flex; }
  .nav-toggle { display: none; }
}

/* Desktop */
@media (min-width: 992px) {
  .cards  { grid-template-columns: 1fr 1fr 1fr; }
  .layout { grid-template-columns: 3fr 1fr; } /* main | sidebar */
}

/* Non-width query */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

Summary & Quiz

📚 Further Reading

• MDN — Using media queries
• MDN — Container queries
• web.dev — Media queries

🚀 What's Next?

You now control when styles change. Next we make the mobile-first idea a deliberate strategy — starting from the smallest screen and progressively enhancing, with the performance and content-prioritization habits that come with it.