CSS Media Query Generator

How the Breakpoint Helper works

CSS media query generator: choosing breakpoints

Breakpoints are the part of responsive design that people over-think. There are only a handful of real decisions, and the device names are the least important of them.

Mobile-first is a default, not a dogma. Writing base styles for the narrow case and adding min-width rules on top means every rule you add is additive and the cascade runs in the same direction as the screen sizes. Desktop-first with max-width means the opposite, and it works fine — it just tends to produce more overrides, because the complicated layout is the one you start from. What you should not do is mix both in the same stylesheet, which gives you two overlapping systems and a permanent question about which rule wins.

Use em, not px. Media query em units are always relative to the browser's default font size, never to your root font size, so they are perfectly predictable. The difference is what happens when a user increases the browser's default text size: em breakpoints move with them, so the layout switches to a simpler arrangement when the text gets big, which is exactly what that user wants. px breakpoints ignore them entirely. Divide by 16 and the numbers stay familiar.

The 0.02 pixel gap. When you pair min-width: 768px with max-width: 768px you get an overlap; use max-width: 767px and you get a gap, because viewports can be fractional — a zoomed desktop browser reports 767.5px and matches neither rule. The convention is to subtract 0.02, which is smaller than any real fractional viewport and leaves no hole.

Device presets are a starting point only. The 480, 768, 1024, 1280 and 1536 values are common because frameworks popularised them, not because phones are those widths. The right breakpoint is where your content breaks: shrink the window until a line of text gets too long or a card grid looks silly, and put the breakpoint there. That number will be specific to your layout and will not be round.

The named set. Choosing all breakpoints at once outputs one @media block per size, each labelled with its name and pixel width, in the strategy and unit you picked. It is the stylesheet skeleton for a new project: paste it once, keep the names, and delete the sizes you turn out not to need. The five widths — 480, 768, 1024, 1280 and 1536 — are close to the defaults of most utility frameworks, so a team already used to md and lg will recognise them.

Container queries change the calculation. @media asks how wide the window is; @container asks how wide the component's parent is. A card in a sidebar and the same card in a main column can then choose their own layouts without knowing anything about the page. Set container-type: inline-size on the wrapper — not the component itself, since an element cannot query its own size — give it a container-name if you have nested containers, and query it exactly like a media query.

When each one is right. Page-level structure — how many columns, whether the nav collapses, page padding — is a media query concern. Anything reusable that might appear in more than one width of slot is a container query concern. Most sites need a small number of media queries and a growing number of container queries.

Keep the count small. Three or four breakpoints is plenty for a whole site. Each one you add is another set of states to check, and fluid techniques like clamp() and minmax() handle the space between breakpoints without any query at all.

Related tools