References

Beginner-friendly references for web development, with live, editable examples.

The CSS @media at-rule

At-rule CSS All modern browsers Updated
Quick answer

The CSS @media at-rule applies a block of CSS only when a condition holds — usually a screen width, e.g. @media (min-width: 768px) { … }. It is the foundation of responsive design, letting one stylesheet adapt to phones, tablets and desktops. It also queries user preferences like dark mode and reduced motion.

Overview

The @media at-rule wraps a block of CSS in a condition: the styles inside only apply when the condition is true. Most often that condition is about the viewport — @media (min-width: 768px) targets screens at least 768px wide — which is how a single stylesheet reshapes itself from phone to desktop.

The convention worth adopting is mobile-first: write your base styles for small screens, then use min-width queries to layer on enhancements as space allows. It tends to produce simpler, less repetitive CSS than starting wide and clawing back with max-width.

Media queries do far more than width, though. They read real user preferences: prefers-color-scheme: dark is how you build dark mode, and prefers-reduced-motion: reduce lets you switch off animation for people who ask their system to limit it. There are queries for orientation, contrast, pointer type and more — a whole channel for adapting to the person and device, not just the screen size.

Syntax

/* mobile-first: base styles, then enhance */
.card { padding: 16px; }

@media (min-width: 768px) {
  .card { padding: 32px; }
}

/* respond to a user preference */
@media (prefers-color-scheme: dark) {
  body { background: #0f172a; color: #e2e8f0; }
}

Example

Live example 
<style>
  .card { padding: 16px; background: #94a3b8; color: #fff; border-radius: 10px; font: 600 14px system-ui, sans-serif; text-align: center; }
  @media (min-width: 400px) {
    .card { background: #1c7ce9; padding: 28px; }
  }
</style>
<div class="card">On screens 400px and wider, I turn blue with more padding.</div>

Best practices

  • Work mobile-first: base styles for small screens, then min-width queries to enhance — it keeps the CSS simpler.
  • Use @media (prefers-color-scheme: dark) for dark mode and prefers-reduced-motion to respect motion preferences.
  • Pick breakpoints based on where your content breaks, not on specific device sizes.
  • For component-level responsiveness, reach for @container queries instead of the viewport-based @media.

Accessibility

@media is one of CSS's most important accessibility tools, because it can respond to settings users have deliberately chosen. prefers-reduced-motion: reduce lets you turn off non-essential animation for people prone to motion sickness; prefers-contrast: more lets you boost contrast; prefers-color-scheme honors their light or dark preference. Reaching for these queries is how you meet users where they are.

Be careful what you hide at breakpoints. Removing content with display: none on small screens hides it from screen readers too, so never use a breakpoint to strip information that mobile users still need. Adapt the layout, but keep the content.

Frequently asked questions

How do I make CSS responsive?
Use @media queries, e.g. @media (min-width: 768px) { … }, to apply different styles at different screen widths. Start mobile-first with base styles, then enhance with min-width.
What is the difference between min-width and max-width queries?
min-width applies styles from a width upward (mobile-first); max-width applies them up to a width (desktop-first). Mobile-first with min-width is usually cleaner.
How do I detect dark mode in CSS?
Use @media (prefers-color-scheme: dark) { … }. The styles inside apply when the user has chosen a dark theme at the system level.
How do I respect reduced motion?
Wrap animation in @media (prefers-reduced-motion: no-preference), or add a reduce block that disables it, so users who asked for less motion are not forced to see it.
@layer @page