Media Query Generator: Breakpoints and Preference Queries, Built Fast
A @media query is simple syntax with a lot of small details to get right — combining conditions with the correct 'and', picking min-width vs. max-width for the intended breakpoint direction, and remembering the exact feature names for user preference queries like prefers-color-scheme. This generator builds the query from presets or custom conditions, so you copy working syntax instead of looking it up each time.
Multiple conditions joined with 'and' must all be true simultaneously for the query to match.
Mobile-First vs. Desktop-First Breakpoints
A mobile-first approach writes unprefixed base styles for small screens, then layers on min-width queries to add complexity as the viewport grows — this tends to keep the 'default' case simple. Desktop-first does the reverse with max-width, starting from the full desktop layout and scaling down. Both are valid; consistency within a project matters more than which one you pick.
Responding to System Preferences, Not Just Screen Size
prefers-color-scheme and prefers-reduced-motion are media features, not viewport-size conditions — they detect OS/browser-level user preferences instead of device dimensions. Combining them with width conditions (e.g., dark mode only above a certain width) is valid but less common than using them independently.
Why Range Queries Need Two Conditions
Targeting 'only tablets' isn't a single condition — it's the intersection of 'wide enough to not be mobile' and 'narrow enough to not be desktop,' which is exactly what a min-width + max-width pair combined with 'and' expresses. A single max-width or min-width query alone only defines one boundary, not a band.
Practical Examples
A Mobile-First Breakpoint
Base styles apply below, this adds tablet+ styles.
- 1.min-width: 768px
- 2.@media (min-width: 768px) { .sidebar { display: block; } }
Dark Mode Styles
Responding to OS theme preference.
- 1.prefers-color-scheme: dark
- 2.@media (prefers-color-scheme: dark) { body { background: #0f172a; } }
Conditions This Generator Supports
- min-width / max-width / range
- orientation: portrait or landscape
- prefers-color-scheme: dark or light
- prefers-reduced-motion: reduce
Good Use Cases
- Building a responsive breakpoint without looking up exact syntax
- Adding dark-mode-aware CSS without JavaScript
- Respecting reduced-motion accessibility preferences
- Prototyping a tablet-only style band with a range query
Frequently Asked Questions
Why does the tool combine conditions with 'and'?
In a @media query, 'and' means every listed condition must be true for the styles to apply — combining a width range with an orientation, for example, requires both conditions to match simultaneously, which is the typical intent for a responsive breakpoint.
Should I use max-width or min-width for mobile-first design?
Mobile-first design starts with base styles for the smallest screens and uses min-width queries to progressively add styles for larger screens. Desktop-first does the reverse with max-width. Most modern CSS guidance favors mobile-first, since it tends to produce simpler, more maintainable overrides.
What does prefers-color-scheme actually detect?
The user's OS-level or browser-level theme preference (light or dark mode) — it lets you ship dark-mode-aware CSS without JavaScript, responding directly to the system setting rather than a manual toggle.
What is prefers-reduced-motion for?
It detects a user's OS-level accessibility setting requesting reduced animation, often used by people sensitive to motion (vestibular disorders) or who simply find animation distracting. Wrapping animation-heavy CSS in this query respects that preference automatically.
Why is there a min-width and max-width 'range' option?
A range query (both min-width and max-width in the same @media rule) targets a specific band of screen sizes — like 'only tablets' — rather than 'everything above' or 'everything below' a single breakpoint.
Do these breakpoint numbers match a specific framework?
The presets (640px, 1024px) are common, round breakpoint values similar to widely-used frameworks like Tailwind CSS, but they're just a reasonable default — adjust the width sliders to match your own design system's actual breakpoints.