CSS Media Query Builder
Compose responsive media queries for width, orientation and preference features.
Overview
The CSS Media Query Builder composes media queries from width, orientation, resolution, hover/pointer capability, colour scheme, reduced-motion, and other Media Queries Level 5 features. It joins conditions with and/or/not correctly and emits both the @media rule wrapper and the bare query you can use in <source media> or matchMedia().
Front-end developers learning how to combine multiple media query conditions or how to write a media query for prefers-reduced-motion will find it removes the boilerplate around parentheses and logical operators. Useful for responsive design, accessibility-aware styling, and progressive enhancement.
How it works
A media query is a comma-separated list of media-condition expressions. Each expression takes the form (feature) or (feature: value). Conditions are combined with and, separated with , for OR, or negated with not. The Media Queries Level 4 range syntax ((width >= 768px)) is supported in modern browsers and reads more naturally than (min-width: 768px).
The builder validates that exclusive features aren't combined nonsensically (prefers-reduced-motion: reduce and no-preference) and emits the most compact valid expression. It also flags discrete features (orientation, hover) versus range features (width, resolution) so you understand what the browser actually checks.
Examples
- Tablet portrait →
@media (min-width: 600px) and (max-width: 900px) and (orientation: portrait) { ... }. - Dark mode preference →
@media (prefers-color-scheme: dark) { ... }. - Mouse-capable device →
@media (hover: hover) and (pointer: fine) { ... }. - High-density display →
@media (min-resolution: 2dppx) { ... }.
FAQ
Range syntax vs min/max-width?
(width >= 768px) is the modern range syntax and reads more naturally. (min-width: 768px) is the original and still works. Pick one style and stay consistent.
What's the difference between hover and pointer?
hover: hover means the primary input can hover (mouse). pointer: fine means precise targeting is available. Touchscreens typically have pointer: coarse and hover: none.
How do I target only print?
@media print { ... }. You can also combine with conditions like @media print and (orientation: landscape).
Container queries vs media queries?
Container queries match an element's size; media queries match the viewport or the device capability. Use container queries for components, media queries for page-level breakpoints.