CSS Media Query Generator
Build @media rules visually — stack width, height, orientation and device-preference conditions, watch a resizable preview window match (or not) in real time, and copy a clean mobile-first block.
Presets
Media type
all is the default and is left out of the output. screen targets displays, print targets paper.Viewport width
Viewport height
Device & preferences
Output
What Is a Media Query?
A condition that switches CSS on or off based on the device or user preferences.
A media query is a list of conditions after @media. The styles inside only apply while every condition joined by and is true. The workhorses are min-width and max-width, which turn layout changes on at breakpoints.
Modern responsive design is mobile-first: write the small-screen layout as the default, then add min-width queries for larger screens. Desktop-first max-width queries work too, but they tangle more easily as breakpoints stack.
Beyond size, media features expose the environment: orientation, prefers-color-scheme for dark mode, prefers-reduced-motion for accessibility, and pointer/hover to tell a touchscreen from a mouse. They let one stylesheet adapt to how the site is actually used.
The preview window here is a real embedded viewport, so the query is tested against a genuine window size — resize it with the width buttons and watch the match indicator flip exactly at your breakpoint.
The Conditions You Can Stack
Every condition the generator can join with and.
(min-width: 768px)
True when the viewport is at least this wide. The mobile-first building block.
(max-width: 1024px)
True up to this width. Desktop-first; also handy for “tablet only” when paired with a min-width.
(orientation: landscape)
Compares the viewport's width and height — not the physical rotation of the device.
(prefers-color-scheme: dark)
Follows the OS light/dark setting — the standard hook for dark themes.
(prefers-reduced-motion: reduce)
Respects the accessibility setting; use it to calm or disable animations.
(pointer: coarse) / (hover: none)
Detect touch input, e.g. to enlarge tap targets only where they're needed.
How to Use the CSS Media Query Generator
Get your result in under ten seconds.
Choose the width logic
Pick min (mobile-first), max, or a range, and set the values in px, rem or em.
Stack more conditions
Add height, orientation, dark mode, reduced motion or pointer/hover as needed — they're joined with and.
Test and copy
Resize the preview window with the width buttons to see the match flip, then copy the @media block.
Why Use the CSS Media Query Generator on Developers Web Tools
Fast, accurate and private — built for developers.
Real preview viewport
The query runs against a genuine embedded window, so you see the exact breakpoint where it matches.
Device & preference features
Orientation, dark mode, reduced motion, pointer and hover — not just width.
px, rem or em
Edit in pixels, output in the unit your design system uses.
Ready block
Outputs a complete @media rule around your selector, with optional sample styles.
Smooth
Re-renders once per frame while you drag.
Private
Runs entirely in your browser — nothing is uploaded.
Frequently Asked Questions
One that uses min-width: the base styles cover small screens and each query adds changes for wider ones. It avoids fighting overrides and matches how most layouts grow.
Prefer min-width (mobile-first). max-width (desktop-first) is fine for quick fixes, but stacks of max-width queries get hard to reason about.
Combine a min and a max: (min-width: 768px) and (max-width: 1024px) — choose the range mode here.
Yes. Browsers resolve rem/em in media queries against the default font size (16px), so 48rem equals 768px and respects user zoom better than px.
It follows your operating system's colour scheme. Switch your OS to dark mode and the preview (and your site) will match.
Yes, with a comma: @media (a), (b). This generator builds a single AND list; for OR, copy two blocks or join them with a comma by hand.
Browsers now accept (width >= 768px) too. This tool outputs the classic min-width/max-width form, which works everywhere.
Only in your own browser (local storage). Press Reset to clear it.