Micro Tools
Advertisement

Media query generator

Generate @media queries for common breakpoints, orientations, dark mode, print and retina screens. Pick a preset or set custom widths, then copy the CSS.

Query builder

Pick a query type, set the values, copy the block.

Generated CSS

Tip: replace the placeholder rule with your own styles.

Advertisement

Min-width versus max-width thinking

Mobile-first CSS uses min-width queries that add complexity as screens grow: base styles target phones, then @media (min-width: 768px) enhances for tablets. Desktop-first does the reverse with max-width. Mobile-first is the modern default because it keeps the critical small-screen CSS lean.

Beyond widths: preference queries

Modern responsive design also adapts to user preferences: prefers-color-scheme for dark mode, prefers-reduced-motion to disable animation for sensitive users, and print to restyle pages for paper. These ship alongside breakpoint queries in a mature stylesheet.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Media Query Generator FAQs

Which breakpoints should I actually use?
Use content-based breakpoints: resize your browser until the layout breaks, then set a query there. The presets here (640, 768, 1024, 1280, 1536) match Tailwind defaults and are a fine starting point for most sites.
Why is my max-width query not applying?
Check the order: later rules win at equal specificity, so max-width queries should come after your base styles. Also verify the viewport meta tag is present, without it phones report a fake 980px width.
Should I still support print styles?
If users print invoices, tickets, articles or resumes from your site, yes. A minimal print query hides navigation and ads, sets black-on-white text, and avoids background colors that waste ink.
What does the retina query do?
It targets screens with 2x pixel density and up, where you can serve sharper background images or thinner borders. Use min-resolution: 192dpi as the standard syntax with the webkit prefix for older Safari.
How do I test dark mode queries?
In Chrome DevTools open the rendering panel and emulate prefers-color-scheme: dark. On macOS you can also toggle the system appearance; the query follows the OS setting live.
Advertisement