Free Media Query Generator
Generate responsive CSS media queries with our free tool. Device breakpoints and feature queries.
- Common device breakpoint presets
- Custom dimension input
- Min-width, max-width, and range queries
- Dark mode preference query
- Reduced motion query
- Multiple query combination
Frequently Asked Questions
What breakpoints should I use?
Common breakpoints are 640px (mobile), 768px (tablet), 1024px (laptop), and 1280px (desktop). But base breakpoints on your content rather than specific devices.
Should I use min-width or max-width?
Mobile-first design uses min-width (styles apply at that width and up). Desktop-first uses max-width. Mobile-first is generally preferred for modern responsive design.
What are feature queries?
Feature queries detect user preferences like prefers-color-scheme (dark mode) or prefers-reduced-motion. They help create accessible, user-friendly experiences.