WEB DEVELOPMENT

Home › Glossary › Web Development· 264 ·

Media Queries

\ˈmiːdiə ˈkwɪəriz\n. pl.

Filed underWeb DevelopmentFront End

In brief · quick answer

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

§ 1 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()`.

§ 2 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) { ... }`.

§ 3 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.

§ 4 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.

§ 5 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.

§ 6 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; }
}
```

§ 7 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.

How Atomic Glue helps

Atomic Glue uses media queries for responsive layouts, dark mode, and accessible interactions. Every site we build adapts to the user, not just the screen. Talk to us.

Get in touch

# Media Queries

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

Category: Web Development (also: Front End)

Author: Atomic Glue Team

## 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](/glossary/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

## Breakpoint strategy

## Common misconception

## Note

## In code

## 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.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/media-queries