Responsive Media Query Generator
Note: A breakpoint set covers every screen and no people. The preference queries — reduced motion, colour scheme, contrast — are the ones that respond to what an individual reader has actually asked for, and they are the ones most sets leave out.
Breakpoints should come from your content, not from device dimensions. There is no phone that is exactly 768 pixels wide in any meaningful sense, and picking that number because it appears in a framework means your layout changes at a point unrelated to where it actually stops working. Widen the browser until the design breaks, and put the breakpoint there.
Expressing them in rem is an underrated detail. A breakpoint in px is fixed; the same breakpoint in rem responds to the reader's font size, so someone reading at 24px reaches the simpler layout sooner — which is usually exactly what they need, since their text takes more room. Dividing by 16 is the whole conversion.
The range syntax is now supported everywhere and is worth adopting: (width >= 48rem) says what it means, and (30rem <= width < 48rem) replaces a pair of min and max declarations where the off-by-one at the boundary was a genuine source of bugs.
The queries most sets omit are the preference ones, and they are the ones that matter to individual readers rather than to layout: reduced motion, colour scheme, contrast, and reduced transparency. The generator includes them because a breakpoint set without them handles every screen and no people.
Frequently Asked Questions
Which breakpoints should I use?
The ones where your own layout stops working. Widen the browser slowly and watch — the point where a card grid becomes cramped or a line of text gets too long is your breakpoint. Copying 768 and 1024 from a framework puts the change at a width unrelated to your content.
Why use rem instead of px for breakpoints?
Because a rem breakpoint responds to the reader's font-size setting. Someone reading at 24px hits the simpler layout sooner, which is what they need — their text occupies more room at any given width. Divide the pixel value by 16 and you have it.
Should I use min-width or max-width?
min-width, almost always. It is what mobile-first means: the base styles are the narrow case and each query adds to them. max-width queries subtract, so rules pile up overriding each other and a phone still processes the desktop rules first.
What is the range syntax?
(width >= 48rem) instead of (min-width: 48rem), and (30rem <= width < 48rem) instead of a min and max pair. It is supported in every current browser, reads as what it means, and removes the boundary off-by-one where a min and a max both matched at exactly the same width.
When should I use a container query instead?
Whenever a component's layout depends on the space it has been given rather than on the window. A card in a sidebar and the same card in a main column want different layouts at the same viewport width — that is precisely what a media query cannot express and a container query can.
