search

Found

info Overview

Generate responsive CSS @media rules, then refine them with min-width, max-width, or range breakpoints, device presets, and prefers-color-scheme.

📘 How to Use

  1. Pick a breakpoint type (min-width, max-width, or range)
  2. Tap a device preset or type a pixel value into Custom Value
  3. Check any media features you need, such as orientation
  4. Read the generated @media block and the visual preview bar

CSS Media Query Generator

px 
@media (min-width: 768px) {
  /* your styles */
}
Copied!
0 480 768 1024 1440 1920

grid_view Related

Article

CSS Media Query Generator | Build @media Rules from Breakpoints and Features

Pick a breakpoint type and pixel value, tick the media features you want, and the tool assembles a clean @media rule. The output is copy-ready, and the preview bar shows exactly which viewport widths the query covers.

💡 About this tool

Hand-writing @media (min-width: 768px) is easy enough, but the friction shows up when you start stacking conditions: nesting parentheses, getting the and keyword in the right spot, and remembering whether prefers-reduced-motion takes a value of reduce or no-preference. The classic footgun is a range query where min-width and max-width overlap by a pixel, so two rules both fire at the exact boundary width and styles double up.

This tool gives you three breakpoint modes (min-width, max-width, range), device presets at 375 / 768 / 1024 / 1440px, a custom pixel field, and checkboxes for the common media features. It writes a syntactically correct @media block as you go, and the preview bar paints the slice of the 0–1920px range the query actually targets — a quick sanity check that you didn't flip min and max.

🧐 Frequently Asked Questions

Should I base my breakpoints on min-width or max-width? For mobile-first CSS, use min-width so the small-screen styles are the baseline and you layer overrides upward. If you're squeezing an existing desktop layout down, max-width is faster. The Mobile First and Desktop First quick patterns are templates for each approach.

How do I target "tablet only" with a range? Set the upper bound one pixel below the next breakpoint, e.g. min-width: 768px and max-width: 1023px. If you use 1024px as the ceiling, both queries fire on a device that's exactly 1024px wide. The Tablet Only pattern seeds 768–1023px for you.

Can I include prefers-color-scheme or hover? Yes. Tick a media feature and it's joined to the width condition, e.g. and (prefers-color-scheme: dark). To target dark mode at any width, set the custom value to 0 or use the Dark Mode pattern.

Does it generate and chains only, or or too? It builds and-joined conditions inside a single @media rule. For a logical OR (comma-separated query lists), output two rules and place them side by side.

Are em or rem breakpoints supported? Output is in px. If your team standardizes on em breakpoints, divide the generated px value by your root font size (usually 16px) and swap the unit.

📚 Fun Facts

Media queries were standardized in the W3C CSS3 Media Queries Recommendation back in 2012; before that, responsive behavior usually meant measuring window.innerWidth in JavaScript and toggling classes. The "user preference" features like prefers-color-scheme and prefers-reduced-motion arrived later in Media Queries Level 5, letting CSS react to an OS-level dark mode toggle or a "reduce motion" accessibility setting with no script at all. A growing school of thought argues against device-named breakpoints entirely — instead of "phone, tablet, desktop," you place a breakpoint wherever the content itself starts to break, which is why container queries (a sibling spec) have become such a hot topic among frontend developers.