CSS Media Query Generator

What it does

The CSS Media Query Generator builds a ready-to-paste @media (...) { } block from a breakpoint width and a condition type. Pick a common device preset (or set a custom pixel width), choose whether the query should apply above or below that width — or switch to an orientation check instead — and paste in the CSS rules you want wrapped. The tool updates the output instantly as you change any option.

What a CSS media query is

A media query lets a stylesheet apply different rules depending on the viewport's width, height, orientation or other characteristics. The basic shape is:

@media (min-width: 768px) {
  /* rules that only apply at 768px and wider */
}

Media queries are the foundation of responsive design: instead of shipping one fixed layout, you write a base layout and then override specific properties once the viewport crosses a breakpoint.

Common breakpoints

There's no single official breakpoint scale — different frameworks (Bootstrap, Tailwind, Material Design) each define their own — but a widely used generic scale looks like this:

• Mobile — 480px (small phones and up)
• Tablet — 768px (tablets and small laptops)
• Laptop — 1024px (laptops and small desktop monitors)
• Desktop — 1280px (standard desktop monitors and up)

Pick "Custom" if your project uses a different scale than these.

How to use it

1. Choose a Breakpoint Preset (Mobile, Tablet, Laptop, Desktop) or select Custom and enter your own pixel width.
2. Choose a Condition Type:
   • Min-width — mobile-first, applies at the breakpoint and wider.
   • Max-width — desktop-first, applies at the breakpoint and narrower.
   • Orientation: portrait/landscape — applies based on the viewport's orientation instead of its width (the breakpoint is ignored for these).
3. Paste the CSS rules you want wrapped into CSS to wrap — leave it as the placeholder comment if you just want the empty @media shell.
4. Copy or download the generated block from the output and paste it into your stylesheet.

FAQ

What's the difference between min-width and max-width? min-width is "mobile-first": you write base styles for small screens, then add overrides that kick in once the screen is at least the breakpoint wide. max-width is "desktop-first": the override applies once the screen is at most the breakpoint wide — the more traditional approach before mobile-first became common.

Can I combine min-width and max-width for a range? This tool generates one condition at a time. For a range (e.g. "only between 768px and 1023px"), generate the max-width version at 1023px and the min-width version at 768px and combine them by hand with and: @media (min-width: 768px) and (max-width: 1023px) { ... }.

Why does the breakpoint field do nothing when I pick orientation? Orientation queries respond to the viewport's aspect ratio, not its width, so the breakpoint value isn't part of the generated condition — only the portrait/landscape choice matters.

Does this tool store or upload anything? No. Everything runs locally in your browser — the CSS you paste in never leaves your device.