CSS Media Query Generator — Responsive Builder

Build CSS media queries visually — pick device presets, set breakpoints, toggle orientation and accessibility features, then copy the generated @media code straight into your stylesheet.

/* Your @media query will appear here */

How to Use the Generator

1. Choose your approach — Mobile-first outputs min-width queries that scale up; desktop-first uses max-width to scale down.
2. Pick a device preset or enter custom min/max width and height values.
3. Toggle media features — add orientation, prefers-color-scheme, prefers-reduced-motion, or print.
4. Click Generate @media Query to see the code and the live viewport match status.
5. Click Copy CSS and paste into your stylesheet.

When to Use Mobile-First vs. Desktop-First

Best practice: mobile-first is the modern default. It reduces specificity conflicts and keeps base styles lean.

How prefers-color-scheme Works

/* Apply dark styles only when the OS is in dark mode */
@media screen and (prefers-color-scheme: dark) {
body {
background: #0f172a;
color: #e2e8f0;
}
}

Pair this with a CSS custom-property theme to avoid duplicating declarations.

prefers-reduced-motion — Accessibility

Users who have vestibular disorders or motion sensitivity can request reduced animations at the OS level. Always respect it:

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}

Related Free Tools

• CSS Flexbox Generator — build flex containers visually
• CSS Grid Generator — define grid tracks and areas with a point-and-click interface
• Screen Resolution Checker — see your exact screen and device pixel ratio