Which strategy should I use?

Mobile-first (min-width) is the modern recommended approach: base styles target the smallest viewport, then min-width media queries progressively enhance for larger screens. It keeps your CSS smaller and faster on mobile.

What are good default breakpoints?

Common values are 480px (mobile), 768px (tablet) and 1024px (desktop). The generator sorts them automatically so the order is always correct.

Can I generate both min-width and max-width?

Each strategy produces one style of breakpoint. If you need both, run the generator twice with different strategies and merge the output — they're complementary.

Does the output include vendor prefixes?

No — @media queries have been supported unprefixed in every browser for over a decade. No -webkit- or -moz- prefixes are needed.

Is my selector validated?

The selector is passed through verbatim, so any valid CSS selector works (.class, #id, nav > ul, [data-attr] etc). An empty selector falls back to .container.

Media Query Generator

Scaffold @media blocks for mobile, tablet & desktop with one click.

100% private — no uploads Design & CSS ToolsFree & unlimited Read tutorial

See how it works

Watch a quick simulation of this tool in action — no file needed.

How to use Media Query Generator

Follow these steps — everything happens instantly in your browser.

1
Step 1. Set the mobile, tablet and desktop breakpoint widths in px.
2
Step 2. Choose a strategy: mobile-first (min-width), desktop-first (max-width), or min-width override.
3
Step 3. Type the selector your rules apply to (e.g. .container).
4
Step 4. Copy the generated @media blocks into your stylesheet.