CSS Media Query Reference

CSS media query reference

Media queries apply CSS conditionally based on the device, viewport, or user preferences. A query combines an optional media type (such as screen or print), one or more media features (such as min-width or prefers-reduced-motion), and logical operators (and, ,, not, only). This reference lists every standard feature and operator — including the newer Level 4 range and boolean forms — with values and notes, plus instant search.

How it works

A media query evaluates to true or false; when true, the enclosed rules apply. Range features (width, height, aspect-ratio, resolution) can be written with min-/max- prefixes or, in Level 4, with comparison operators directly inside the parentheses. Discrete features (orientation, prefers-color-scheme, hover, pointer) take a fixed set of keywords. Logical operators chain features: and requires all, a comma means or, not negates, and only shields legacy browsers. The filter matches feature names, values, and descriptions.

Feature categories

Viewport dimensions — the most common:

• width / height — viewport size, with min-/max- prefixes or Level 4 ranges
• aspect-ratio — the ratio of viewport width to height; useful for landscape/portrait layouts

User preference features — respond to operating system and browser settings:

• prefers-color-scheme: dark | light — the user’s chosen colour scheme
• prefers-reduced-motion: reduce | no-preference — the user has requested less animation
• prefers-contrast: more | less | forced | no-preference — the user has enabled high contrast
• forced-colors: active | none — the OS is enforcing a limited colour palette (Windows High Contrast mode)
• prefers-reduced-transparency: reduce | no-preference — the user prefers less transparency

Pointer and interaction features:

• pointer: coarse | fine | none — the primary pointing device precision; coarse = touch, fine = mouse
• hover: hover | none — whether the primary device supports hover
• any-pointer / any-hover — like pointer/hover but considers any available input device

Display features:

• display-mode: fullscreen | standalone | minimal-ui | browser — how a PWA is displayed
• orientation: landscape | portrait
• resolution — display pixel density (dpi, dpcm, dppx)

Breakpoint patterns

Common responsive breakpoints using Level 4 range syntax:

/* Small devices: up to 640px */
@media (width < 640px) { ... }

/* Tablets: 640px to 1024px */
@media (640px <= width < 1024px) { ... }

/* Desktops: 1024px and up */
@media (width >= 1024px) { ... }

/* User preference: dark mode */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

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

Tips and example

Level 4 range syntax is cleaner than paired min/max:

/* old */
@media (min-width: 600px) and (max-width: 900px) { ... }

/* level 4 */
@media (600px <= width <= 900px) { ... }

• Prefer prefers-reduced-motion: reduce to pare back animations for users who request it — an accessibility win and in some jurisdictions a legal requirement.
• pointer: coarse and hover: none detect touch devices more reliably than guessing from width alone — a 768px-wide tablet can be touch-only even though it matches a “desktop” width breakpoint.
• Combine a media type and features with and; separate alternative whole queries with commas.