Why does mobile-first use min-width and desktop-first use max-width?

Mobile-first means the unprefixed styles target the smallest screen, then each min-width query layers enhancements as the viewport grows — styles only ever get added, never undone, which keeps the cascade predictable. Desktop-first inverts it: the base styles target large screens and each max-width query strips things back for smaller ones. Most modern frameworks (Tailwind, Bootstrap 5) are mobile-first because progressive enhancement is easier to reason about, but desktop-first still shows up in legacy codebases and print-heavy layouts. Toggle the strategy switch and the generated queries flip between min- and max-width automatically.

Should breakpoints be in px or em?

px is simpler and what most teams ship. em (relative to the browser's root font size, default 16px) has one real advantage: if a user bumps their default font size up for readability, em breakpoints shift with it, so your layout breaks to the next column count at a point that tracks their text size rather than a fixed pixel. That matters for accessibility. The catch is that em in a media query is always relative to the browser default, not your :root font-size override, so 48em is always 768px at the default zoom. Use the px/em toggle here to see both; pick em if accessibility-first, px if you want dead-simple.

How do I use prefers-color-scheme for dark mode?

Pick the color-scheme feature, choose dark, and you get @media (prefers-color-scheme: dark) { ... }. Put your dark-theme variable overrides inside that block and the browser applies them whenever the OS is set to dark mode — no JavaScript, no class toggling. Pair it with a light block if your base styles assume dark. Note this only reads the system preference; a manual in-app theme switch still needs a class or data-attribute on the root element.

What is the 0.02px in the desktop-first max-width queries?

It prevents a viewport that sits exactly on a breakpoint from matching two adjacent queries at once. If you wrote (max-width: 768px) and (min-width: 768px), a screen at precisely 768px satisfies both. Subtracting 0.02px (the smallest reliably distinguishable fraction across browsers, the value Bootstrap 5 uses) closes the gap so each viewport width matches exactly one query.

Does the tool send my breakpoints anywhere?

No. All query strings are assembled in plain JavaScript in your browser. Nothing is uploaded or logged. The only network-adjacent detail is the shareable URL, which encodes your numeric parameters in the query string so a teammate opening the link sees the same setup.

Scaffold a mobile-first Tailwind-aligned stylesheet in seconds

You're hand-writing CSS but want the same breakpoints your Tailwind config uses so the two never drift. Pick the Tailwind preset, keep mobile-first, and copy the generated skeleton: a base rule plus min-width blocks at 640, 768, 1024, 1280, and 1536. Drop your per-breakpoint rules into each block. Now your custom CSS and your utility classes break at exactly the same points, and a designer reviewing the layout sees consistent reflow whether a component is styled with utilities or hand-written rules.

Add OS dark mode without any JavaScript

A marketing page needs to respect the visitor's system theme but you don't want to ship a theme-toggle script. Switch the single- query builder to color-scheme, pick dark, and paste @media (prefers-color-scheme: dark) into your stylesheet. Put your dark variable overrides (--bg, --fg, --accent) inside it. The OS flips it automatically at sunset on most phones — zero runtime cost, no flash of the wrong theme on first paint.

Honor reduced-motion for an accessible hero animation

Your landing hero has a parallax scroll and an autoplay fade. An accessibility audit flags it for users with vestibular disorders. Generate @media (prefers-reduced-motion: reduce), wrap your animation declarations so they collapse to a static state inside it, and the OS-level "reduce motion" toggle now disables the effect. One copy-paste closes a real WCAG 2.3.3 finding.

Target touch devices with bigger tap targets

Buttons that feel fine with a mouse are too small for thumbs. Use the pointer feature, pick coarse, and you get @media (pointer: coarse) { ... }. Bump padding and min-height for touch inside it without affecting the desktop layout. Pair it with the hover feature set to none to hide hover-only affordances (tooltips that need a mouse) on touch screens.

Migrate a legacy desktop-first sheet to documented breakpoints

You inherited a stylesheet full of bare (max-width: 991px) queries with no rationale. Switch to desktop-first, load the Bootstrap 5 preset, and the tool reproduces the 1399.98 / 1199.98 / 991.98 / 767.98 / 575.98 cap values with named comments. Now you can map the legacy numbers to documented tiers and refactor with confidence instead of guessing what 991 was supposed to mean.

CSS Media Query & Responsive Breakpoint Generator

CSS @media query + responsive breakpoint generator — Tailwind / Bootstrap / Material presets, mobile-first vs desktop-first, dark mode, hover, reduced-motion, aspect-ratio.

Runs locally
Category Developer & DevOps
Best for Formatting, validating, shrinking, or inspecting code-adjacent text.

Framework preset

Strategy

Unit

Responsive stylesheet

/* base (mobile) — no media query */
:root {
  /* styles for this breakpoint */
}

/* sm and up */
@media (min-width: 640px) {
  :root {
    /* styles for this breakpoint */
  }
}

/* md and up */
@media (min-width: 768px) {
  :root {
    /* styles for this breakpoint */
  }
}

/* lg and up */
@media (min-width: 1024px) {
  :root {
    /* styles for this breakpoint */
  }
}

/* xl and up */
@media (min-width: 1280px) {
  :root {
    /* styles for this breakpoint */
  }
}

/* 2xl and up */
@media (min-width: 1536px) {
  :root {
    /* styles for this breakpoint */
  }
}

Single query builder

Min widthpx

Generated query

@media (min-width: 768px) {
  /* your styles here */
}

What this tool does

A media query generator that covers the whole spec, not just min-width. Pick a layout strategy (mobile-first or desktop-first), choose a framework breakpoint preset — Tailwind (sm 640, md 768, lg 1024, xl 1280, 2xl 1536), Bootstrap 5 (sm 576 → xxl 1400), or Material 3 (medium 600 → extra-large 1600) — and the tool emits a complete, pasteable responsive stylesheet skeleton: a base rule plus one @media block per breakpoint, in ascending min-width order for mobile-first or descending max-width order for desktop-first. The desktop-first output caps each max-width at breakpoint minus 0.02px, the well-known fix for the off-by-one overlap where a viewport sitting exactly on a breakpoint would otherwise match two queries at once. Below the sheet there is a single-query builder for everything you actually write in real projects: width ranges (min..max in one block), orientation, the prefers-color-scheme dark/light switch for theming, prefers-reduced- motion for accessibility, the hover and pointer capability checks that separate touch from mouse, and min-aspect-ratio. Switch the whole output between px and em with one click — px is the common default but em breakpoints scale with the user's browser font size, which several accessibility-focused codebases prefer. Every parameter is encoded in the URL, so a shared link reopens the exact configuration, and your chosen framework, strategy, and unit are remembered locally for next time. 100% client-side: nothing you type leaves the browser tab.

Tool details

Input: Text + Numbers + Structured content; The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output: Live result + Copy; The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy: Browser-side processing; The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share: Shareable URL state; Key settings are encoded in the URL so another person can reopen the same setup.
Performance budget: Initial JS <= 10 KB; No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit: Developer & DevOps · Developer; Category and role tags drive related tools, internal links, and quick fit checks.

How to use

1. Input

Paste or drop your content into the tool panel.
2. Process

Click the button. All processing is local in your browser.
3. Copy / Download

Copy the result or download to disk in one click.

How CSS Media Query Generator fits into your work

Use it in the small gaps between coding, reviewing, debugging, and shipping.

Developer jobs

Formatting, validating, shrinking, or inspecting code-adjacent text.
Preparing snippets for documentation, tickets, commits, or handoff.
Checking a small payload quickly without switching tools.

Developer checks

Run irreversible transforms like minify or obfuscate on a copy.
Keep secrets out of pasted snippets unless the tool explicitly stays local.
Use your normal tests or linter before shipping transformed code.

Good next steps

These links move the current task into a more complete workflow.

Real-world use cases

Scaffold a mobile-first Tailwind-aligned stylesheet in seconds
You're hand-writing CSS but want the same breakpoints your Tailwind config uses so the two never drift. Pick the Tailwind preset, keep mobile-first, and copy the generated skeleton: a base rule plus min-width blocks at 640, 768, 1024, 1280, and 1536. Drop your per-breakpoint rules into each block. Now your custom CSS and your utility classes break at exactly the same points, and a designer reviewing the layout sees consistent reflow whether a component is styled with utilities or hand-written rules.
Add OS dark mode without any JavaScript
A marketing page needs to respect the visitor's system theme but you don't want to ship a theme-toggle script. Switch the single- query builder to color-scheme, pick dark, and paste @media (prefers-color-scheme: dark) into your stylesheet. Put your dark variable overrides (--bg, --fg, --accent) inside it. The OS flips it automatically at sunset on most phones — zero runtime cost, no flash of the wrong theme on first paint.
Honor reduced-motion for an accessible hero animation
Your landing hero has a parallax scroll and an autoplay fade. An accessibility audit flags it for users with vestibular disorders. Generate @media (prefers-reduced-motion: reduce), wrap your animation declarations so they collapse to a static state inside it, and the OS-level "reduce motion" toggle now disables the effect. One copy-paste closes a real WCAG 2.3.3 finding.
Target touch devices with bigger tap targets
Buttons that feel fine with a mouse are too small for thumbs. Use the pointer feature, pick coarse, and you get @media (pointer: coarse) { ... }. Bump padding and min-height for touch inside it without affecting the desktop layout. Pair it with the hover feature set to none to hide hover-only affordances (tooltips that need a mouse) on touch screens.
Migrate a legacy desktop-first sheet to documented breakpoints
You inherited a stylesheet full of bare (max-width: 991px) queries with no rationale. Switch to desktop-first, load the Bootstrap 5 preset, and the tool reproduces the 1399.98 / 1199.98 / 991.98 / 767.98 / 575.98 cap values with named comments. Now you can map the legacy numbers to documented tiers and refactor with confidence instead of guessing what 991 was supposed to mean.

Common pitfalls

Mixing min-width and max-width strategies in the same sheet creates dead zones or double-matched ranges. Pick one strategy per stylesheet — this tool's strategy switch enforces that by generating either all-min or all-max queries, not a mix.
Writing (max-width: 768px) and (min-width: 768px) as adjacent breakpoints. A viewport at exactly 768px matches both. Use the desktop-first output here, which caps the max at 767.98px so each width matches exactly one query.
Putting em in a media query expecting it to follow your :root { font-size } override — it doesn't. Media-query em is always relative to the browser's default font size, so 48em is 768px regardless of your CSS. If you need component-relative scaling, that's container queries, not media queries.

Privacy

Every media query string is assembled by plain JavaScript running in your browser tab. No breakpoint value, framework choice, or query is uploaded, logged, or analyzed. The one thing to know: the shareable URL encodes your numeric parameters (framework, strategy, min/max width, unit) in the query string so a teammate opening the link lands on the same configuration. Those are non-sensitive layout numbers, so sharing is safe; there is nothing private in a breakpoint. Your framework, strategy, and unit preference are also saved in this browser's localStorage so the tool reopens with your last setup — that data never leaves the device and you can clear it any time via your browser's site data settings.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role

CSS Media Query & Responsive Breakpoint Generator

What this tool does

Tool details

How to use

1. Input

2. Process

3. Copy / Download

How CSS Media Query Generator fits into your work

Developer jobs

Developer checks

Good next steps

Real-world use cases

Scaffold a mobile-first Tailwind-aligned stylesheet in seconds

Add OS dark mode without any JavaScript

Honor reduced-motion for an accessible hero animation

Target touch devices with bigger tap targets

Migrate a legacy desktop-first sheet to documented breakpoints

Common pitfalls

Privacy

FAQ

CSS clamp() Fluid Typography Generator

Tailwind CSS Cheatsheet

Flexbox Playground & CSS Generator

CSS Grid Visual Generator

PX REM EM Converter

CSS Scrollbar Generator

AI Eval Planner

Apache Cheatsheet

API Key Generator

API Rate Limit Cheatsheet

ASCII Table Generator

ASCII Table Reference