About this tool
Compose a responsive @media query by picking min-width, max-width or a range plus orientation, with one-click device presets, then copy the wrapper. It all runs in your browser.
Frequently asked questions
What is the difference between min-width and max-width?
min-width applies styles at that width and above (mobile-first), while max-width applies them at that width and below.
How do the device presets work?
Each preset fills in typical breakpoints — mobile up to 767px, tablet 768–1023px and desktop from 1024px — which you can then fine-tune.