Media Query Generator

Mobile-first uses min-width media queries, so your base (unwrapped) CSS targets the smallest screens and each breakpoint progressively adds styles for larger viewports — the approach recommended by most modern frameworks. Desktop-first uses max-width, so your base CSS targets the largest screens and breakpoints progressively adjust for smaller ones — useful when retrofitting responsiveness onto an older desktop-first codebase.

To avoid the breakpoint pixel itself matching two overlapping queries at once. If a "md" breakpoint is 768px, a max-width query at exactly 768px would still apply at 768px wide, and a min-width query at the same value would also apply — subtracting 1px keeps the ranges clean and non-overlapping.

Both are valid. Pixel breakpoints are simpler to reason about and match common device widths directly. Em-based breakpoints scale with the user's browser font-size setting, which some accessibility-focused teams prefer since it means the layout adapts to users who've increased their base font size, not just their viewport width.

Yes — every breakpoint's name and pixel value is editable, and you can add or remove as many as you need. The output always sorts breakpoints from smallest to largest regardless of the order you added them in.

No — it generates the media query wrapper with a comment showing the breakpoint name, ready for you to paste your own styles inside. It intentionally doesn't guess what styles you want at each breakpoint.