How Media Query Generator works
Media queries apply CSS only when the browsing context matches a condition — usually a viewport width, but equally orientation, colour scheme preference, print output or a request for reduced motion. This generator writes them for you in either mobile-first or desktop-first style, using the Tailwind or Bootstrap breakpoint sets or a width of your own, and handles the fractional-pixel detail that keeps adjacent ranges from overlapping. It also emits the three non-width queries most sites should ship regardless of their breakpoint strategy: dark mode, reduced motion and print.
Why maximum widths end in .98
Viewport widths are not always whole numbers. Browser zoom, high-density displays and some desktop window sizes all produce fractional widths, so a viewport can genuinely report 767.5px. If one rule applies up to max-width: 767px and the next from min-width: 768px, that half-pixel viewport matches neither and the element falls back to its unstyled base — a bug that is maddening to reproduce because it only appears at specific zoom levels or on specific hardware. Ending the lower range just below the next breakpoint, at 767.98px, closes the gap while remaining safely below 768. This is exactly why Bootstrap's generated breakpoints use the .98 convention, and it is worth copying rather than rediscovering. The problem does not arise with mobile-first min-width queries, since overlapping ranges are harmless when later rules simply override earlier ones — which is one more reason mobile-first is the easier strategy to get right.
Preference queries deserve as much attention as widths
Width breakpoints get all the attention, but the queries that describe what a user has asked for often matter more to real people. prefers-reduced-motion is the clearest case: it reflects an operating-system setting that people with vestibular disorders enable deliberately, and honouring it is a genuine accessibility requirement rather than a nicety. The common implementation reduces every animation and transition to a near-zero duration inside that query, which preserves any state change the animation was communicating while removing the movement itself. prefers-color-scheme lets a site follow the system's light or dark setting without any toggle at all, and pairs well with CSS custom properties, where only the colour tokens need redefining rather than every rule. prefers-contrast and forced-colors cover users who have increased contrast or enabled a high-contrast mode. None of these has anything to do with screen size, and all of them are queries a site can add without touching its layout.
Using Media Query Generator
- 1
Choose an approach — mobile-first min-width, desktop-first max-width, or a range between two widths.
- 2
Pick a breakpoint set, or select Custom and enter your own widths.
- 3
Optionally restrict the query to portrait or landscape, and choose px or em units.
- 4
Copy the generated CSS and fill in the rules inside each block.
What people use it for
Setting up a new project's breakpoints
Starting from the Tailwind or Bootstrap set keeps your CSS aligned with whatever framework the project already uses.
Targeting a single size range
The range mode produces a query that applies between two widths only, for a rule that should not leak into larger screens.
Adding dark mode support
The prefers-color-scheme block respects the reader's system setting rather than requiring them to find a toggle.
Making a page printable
A print query hides navigation, footers and interactive controls so a printed page carries only the content.
Tips
- Prefer mobile-first min-width queries: overlapping ranges are harmless, so the fractional-pixel problem never arises.
- em-based breakpoints scale with the reader's default font size, which serves people who have increased it in their browser settings.
- Container queries now handle 'this component is narrow' far better than viewport queries ever did — reach for them when the component, not the page, is what changed.