@media screen and (min-width: 320px) and (max-width: 768px) {
}About CSS Media Query Generator – Responsive Breakpoints
A media query generator builds the responsive `@media` rules that power adaptive CSS layouts. Instead of remembering the exact syntax for min-width, max-width, orientation, and feature queries, you pick a few controls and copy a ready-to-paste breakpoint. It's built for front-end developers who switch between Tailwind, Bootstrap, and hand-rolled CSS and don't want to look up the spec every time.
This tool generates css breakpoints for a media type (screen, print, or all), a minimum and maximum viewport width, device orientation, and modern feature flags like `prefers-color-scheme` and `prefers-reduced-motion`. Conditions are joined with `and` automatically, and common breakpoint presets fill the width field in one click.
Everything runs entirely in your browser. No query you build is uploaded — the tool works fully offline.
Features
- Generate min-width, max-width, and range breakpoints
- Orientation, prefers-color-scheme, and prefers-reduced-motion feature queries
- Common breakpoint presets (sm 640 · md 768 · lg 1024 · xl 1280)
- Copy the @media rule with one click; works completely offline
How to use
- Pick a media type (screen, print, or all) and set a min and/or max width.
- Add orientation or a feature flag like prefers-color-scheme if you need it, or click a preset chip to fill the width.
- Copy the generated @media rule and paste it into your stylesheet.
Frequently asked questions
What is the difference between min-width and max-width media queries?
A min-width query applies its styles when the viewport is at least that wide — the basis of mobile-first CSS. A max-width query applies when the viewport is at most that wide, used for desktop-first or capping styles. Combining both with "and" targets a specific width range.
What are common responsive breakpoints?
There is no universal standard, but popular frameworks cluster around 640px (small/mobile), 768px (tablet), 1024px (desktop), and 1280px (large desktop). This tool offers those as preset chips, but you can type any width you like.
How does prefers-color-scheme work?
The prefers-color-scheme feature query lets CSS respond to the user's system theme. "(prefers-color-scheme: dark)" applies styles when the OS is set to dark mode, which is how most sites implement automatic dark themes.
Does my data get sent anywhere?
No. The query is built locally in your browser from the controls you choose. Nothing is uploaded, and the tool keeps working with the network unplugged.
Related tools
Everything runs locally in your browser — your input is never uploaded.