Media Queries

Media queries are CSS features that apply styles conditionally based on device characteristics like viewport width, screen resolution, or user preferences.

Definition

Media queries are the conditional logic of CSS. They let you apply styles only when certain conditions are true: the viewport is wider than 768px, the user prefers reduced motion, the device has a high-resolution screen, or the media type is print. Media queries are the foundation of responsive design. Without them, you would need separate style sheets for every device. The @media rule in CSS accepts a media type (screen, print, all) and one or more feature queries in parentheses. Media queries can test width, height, aspect ratio, orientation, resolution, color depth, hover capability, pointer accuracy, and user preferences (prefers-color-scheme, prefers-reduced-motion). They can be used in CSS, in the HTML <link> element's media attribute, and in JavaScript via window.matchMedia().

How it works

A media query is a boolean expression. When the condition matches, the enclosed styles apply. When it does not, they are ignored. You combine conditions with and, not, only, and commas (which act as OR). Example: @media (min-width: 768px) and (orientation: landscape) { ... }.

Breakpoint strategy

Choose breakpoints based on your content, not on device sizes. Common breakpoints are arbitrary and change as new devices appear. A content-first approach adds a breakpoint wherever the layout starts to look cramped or stretched. This produces fewer breakpoints and more maintainable code than targeting specific phones or tablets.

Common misconception

Media queries are not only about screen width. Use prefers-color-scheme for dark mode support, prefers-reduced-motion for accessibility, prefers-contrast for high-contrast needs, and (hover: hover) to detect touch devices. These make your site responsive to user preferences, not just screen dimensions.

Note

You can nest media queries, but it is often cleaner to use logical combinators. CSS container queries (@container) are the newer alternative that respond to a parent element's size rather than the viewport, useful for reusable components.

In code

```css
/* Classic responsive breakpoints */
@media (min-width: 768px) {
  .sidebar { display: block; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; }
}

## Common questions

Q: What is the difference between min-width and max-width?

A: `min-width` applies when the viewport is at least that width (mobile-first). `max-width` applies when it is at most that width (desktop-first).

Q: Can I use media queries in JavaScript?

A: Yes. `window.matchMedia('(min-width: 768px)')` returns a MediaQueryList object with a `matches` property and supports change listeners.

Key takeaways:

- Media queries apply CSS conditionally based on device or user preferences.

- Use content-driven breakpoints instead of device-specific sizes.

- Media queries support width, height, orientation, color scheme, motion preferences, and more.