CSS @media Query Tester

Paste a @media query on the left. The tool parses every condition, shows a plain-English breakdown, and tells you whether the query matches at the simulated viewport. A ten-device matrix (Galaxy Fold through QHD) shows you at a glance which breakpoints fire. Pure client-side, no upload.

The @media wrapper is optional. Both (min-width: 768px) and screen and (min-width: 768px) are accepted.

Verdict —
Plain-English summary

—

—

Condition breakdown

No conditions parsed yet.

Viewport simulator

Common presets

Click a preset to load it into the query box. All presets parse cleanly.

Device-width matrix

For each canonical device width, the matrix shows whether the current query matches (assuming the same height and feature values as the simulator). Useful when picking a breakpoint.

Device Width Match

Media feature cheat sheet

A reminder of the most useful features. Anything not listed is parsed but not evaluated at runtime (it'll show "unsupported" in the matrix).

width / min-width / max-width
Viewport width in CSS px. Modern range form: (width <= 1024px).
height / min-height / max-height
Viewport height in CSS px.
aspect-ratio / min-aspect-ratio / max-aspect-ratio
Viewport aspect ratio as width/height, e.g. (aspect-ratio: 16/9).
resolution / min-resolution / max-resolution
Device resolution. Units: dpi, dpcm, dppx.
orientation
landscape (width ≥ height) or portrait.
prefers-color-scheme
light, dark, or no-preference.
prefers-reduced-motion
reduce when the user has asked for less animation.
hover / any-hover
Whether the primary (or any) input supports hover.
pointer / any-pointer
Primary input device: fine (mouse), coarse (touch), none.
not / only
Prefix the query: not print, only screen and ….