How to use the Media Query Generator
- 1. Choose the conditionFrom a width up, up to a width, or between two widths.
- 2. Add extrasOrientation, dark mode, reduced motion or mouse-only, and px or em.
- 3. Copy and checkGet the @media rule and see if it matches your current screen.
Mobile-first vs desktop-first
Mobile-first means writing styles for small screens first, then adding @media (min-width: …) blocks for bigger screens. Desktop-first does the opposite with max-width. Mobile-first usually means less CSS, because phones get the simplest layout and only larger screens need extra rules. Bootstrap and Tailwind both work mobile-first.
Common breakpoints: Bootstrap uses 576, 768, 992, 1200 and 1400px; Tailwind uses 640, 768, 1024, 1280 and 1536px. Choose breakpoints where your layout starts to look wrong, not by device name.
Worked example
The defaults (from 768px up) give @media (min-width: 768px). Tick write widths in em and it becomes (min-width: 48em), since 768 ÷ 16 = 48. Em-based queries respond correctly when a user raises their browser's default text size.
The tool also runs the query on your device with window.matchMedia and tells you whether it matches right now. Open the page on your phone to see it change.
(prefers-color-scheme: dark): apply a dark theme when the system is in dark mode.(prefers-reduced-motion: reduce): turn off big animations for people who get motion sick.(hover: hover) and (pointer: fine): hover effects only on devices with a mouse, so they don't stick on touch screens.
Frequently asked questions
Why does my query not apply on the phone?
Check that the page has . Without it, phones pretend to be about 980px wide.
Should a range use 767px or 768px?
Make ranges not overlap: if one rule is (min-width: 768px), the one below should be (max-width: 767.98px) or 767px.
Can I use queries in JavaScript?
Yes. window.matchMedia(query).matches gives true or false, and you can listen for changes.
Is it free?
Yes, free. The first query asks for your name and WhatsApp number once, and then every Uncodemy tool opens without asking.