Media Query Generator
Build responsive CSS media queries with the correct syntax. Combine width breakpoints with orientation, hover capability, color-scheme, and motion preferences. Includes presets for Tailwind, Bootstrap, and Material Design breakpoints.
@media (min-width: 768px) {
.container {
padding: 2rem;
max-width: 1200px;
}
}About Media Query Generator
Media queries are the foundation of responsive CSS, but writing them correctly means remembering syntax and knowing which breakpoints match your framework's conventions. This Media Query Generator produces valid CSS with the correct syntax every time, includes framework presets (Tailwind, Bootstrap, Material, common device sizes), and combines width breakpoints with orientation, hover capability, color scheme, and reduced-motion preferences.
The tool covers modern media features that many developers miss: prefers-color-scheme for dark mode, prefers-reduced-motion for accessibility, hover: none for touch devices, and print stylesheets. Combining these correctly is powerful — e.g., @media (min-width: 768px) and (hover: hover) targets desktop-like devices that support hover, not touch tablets. The output is copy-paste ready with your CSS rule body wrapped in the correct query.
How to Use
Pick a starting breakpoint from the framework presets, or type your own min/max width.
Optionally add orientation, hover capability, color scheme, or motion preference conditions.
Toggle 'Print' to generate a print-only stylesheet media query.
Type the CSS rule body inside the { … } — the tool wraps it in the correct media query syntax.
Copy the output and paste into your stylesheet.
Frequently Asked Questions
Should I use min-width or max-width for responsive design?
Mobile-first is the standard: design for the smallest viewport by default, then use min-width media queries to add styles as the screen gets bigger. This produces cleaner cascade order and works better with progressive enhancement.
What is prefers-color-scheme?
A media query that matches the user's OS-level dark/light preference. `@media (prefers-color-scheme: dark)` applies styles when the user's system is set to dark mode. Combine with CSS variables for a clean dark-mode implementation without JavaScript.
What is prefers-reduced-motion?
A media query that matches when the user has enabled 'Reduce motion' in their OS accessibility settings. Wrap animations and transitions in `@media (prefers-reduced-motion: no-preference)` to disable them for users who find motion disorienting. Small change, big accessibility win.
Do I need to prefix media queries for older browsers?
No — media queries have been universally supported since 2013. Even IE 9 supported them. Modern browsers (2015+) support the newer prefers-color-scheme, prefers-reduced-motion, and hover queries without prefixes.
What is the difference between screen and all in @media?
@media screen matches computer/tablet/phone screens but not print or speech synthesizers. @media all matches everything. Modern advice: omit both — @media (min-width: X) implicitly means all media types, which is what you almost always want.