Media query generator: breakpoints that do not overlap

What is a media query breakpoint?

A breakpoint is the viewport width at which a layout changes. In CSS you express it with a media query — most often a pair of them, one for the narrow case and one for the wide case — and the whole responsive design rests on those two queries dividing the width axis cleanly between them.

They do not. Media Queries Level 4 defines the two prefixes exactly: a min- prefix is the same as the >= operator, and a max- prefix is the same as <=. Both include the value you wrote. So (max-width: 600px) and (min-width: 600px) are both true at exactly 600 pixels, and a browser resolves that by applying whichever rule comes last — silently, and differently depending on the order of your stylesheet.

This generator takes a list of breakpoints and writes the queries four different ways, showing for each one whether the boundary is exact, overlapping, or leaves a gap — and, when it leaves a gap, the precise interval of widths that matches neither query.

How to use it

1. Type your breakpoints, separated by commas or spaces. A bare number takes the unit chosen beside the field; write 40rem to override it for a single value. The sample buttons load Bootstrap's breakpoints, Tailwind's, and the two exact spellings.
2. Pick how the query below the breakpoint should be written. Four choices: the range syntax, the negation form, an offset of 0.02, or an offset of a whole unit. The table underneath updates to show what each one does at the boundary, and the note above it says which real toolchain ships that choice.
3. Check the last panel against your own browser. It hands the generated queries to matchMedia and reports what your viewport says, live. Zoom in and out and the numbers move — zooming is the easiest way to give yourself a fractional viewport width, which is exactly the case an offset breakpoint misses.

Why an offset breakpoint cannot be right

Since min- is >= and max- is <=, the two queries an author writes around a breakpoint are a pair of closed half-lines. Two closed half-lines cannot partition a line. Either they share their endpoint, in which case some width matches both, or you pull them apart, in which case an open interval between them matches neither. There is no third case and no choice of values that escapes it.

The specification says so itself, and is unusually frank about the workaround. Its note observes that authors offset their values so that both queries are not true at once, then points out that pairing 320 with 321 "does not take into account the possibility of fractional viewport sizes", and describes the improved 320.01px version as one that "significantly reduces the chance that a viewport width on a device would fall between the cracks". That is a probability, in the standard's own words, not a fix.

The four strategies here are the four real answers, and every hole size was measured from a published artifact rather than from documentation. Bootstrap 5.3.3's own stylesheet pairs (min-width: 576px) with (max-width: 575.98px), a hole 0.02px wide. postcss-media-minmax, the canonical converter from the range syntax to the old prefixes, turns (width < 600px) into (max-width: 599px) — a hole a full pixel wide — and its offset is not even constant: give it 37.5rem and it subtracts a thousandth instead of a whole unit.

The two spellings that are exact, and how they differ

The range syntax fixes this properly, because it has strict comparisons that the prefixes lack. (width < 600px) beside (width >= 600px) covers every width exactly once, including 600 itself. This is what Tailwind v4 emits: its md: variant compiles to (width >= 48rem) and its max-md: variant to (width < 48rem).

There is a second exact spelling, and it is older than the first. Negating an inclusive query gives you a strict one: not all and (min-width: 600px) is true precisely when the width is below 600, and that form has been valid since Media Queries 3, so it reaches browsers that never learned the range syntax. Tailwind's optimizer rewrites its range queries into exactly this, and Lightning CSS does the same — which is why built CSS everywhere appears to use the old inclusive prefixes while the down variant is really a negation.

The two are not interchangeable, though, and no converter mentions it. Section 2.4 of the same spec says a media feature naming a concept the device does not have "must always evaluate to false". A speech browser has no width, so (width < 600px) is false there — while not all and (min-width: 600px) negates a false and comes out true. They agree on every visual medium and disagree everywhere else.

Honest limitations

The gap an offset leaves is real but narrow, and on a display where every viewport width is a whole number of CSS pixels you will never land in it. What produces fractional widths is browser zoom, a device pixel ratio that is not a whole number, and a scrollbar taking a fractional slice — which is why the live panel invites you to zoom rather than asserting how often it bites. This page deliberately publishes no frequency: the honest artifact is the exact interval and a way to test it yourself, not a percentage whose population I would have had to invent.

The tool also compares only the width and height features. The prefixes apply to every range-type feature — resolution, aspect-ratio, color — and the same arithmetic holds for all of them, but width is where the question actually arises. Discrete features like pointer and orientation take no prefix at all, which the spec states outright.

Finally, the generated CSS is a skeleton: two media blocks per breakpoint with an empty rule inside. It is meant to be pasted and filled in, not to be a stylesheet. The mobile-first ladder shown underneath is worth considering first — writing only the min- query per breakpoint and letting each rule override the one below it sidesteps the whole problem, because the second query never gets written.

Why is it free?

It is arithmetic on a handful of numbers plus your browser's own matchMedia, and all of it runs in this tab as you type. No server is involved, so there is nothing to meter and no account to create.

Nothing is uploaded. The breakpoints you type stay on your machine.