Media Query Generator
Build responsive CSS media queries in seconds.
How to use
- 1 Pick the feature to target: width or height.
- 2 Choose a bound: min, max, or a range.
- 3 Enter the pixel value(s) for your breakpoint.
- 4 Copy the generated @media block into your stylesheet.
About Media Query Generator
The Media Query Generator turns a breakpoint into a clean, copy-paste-ready CSS @media rule so you can build responsive layouts without memorising syntax.
Choose whether you are targeting viewport width or height, then pick how the breakpoint should behave: a min bound for mobile-first design, a max bound for capping styles below a size, or a range that combines both into a single rule.
As you type a pixel value the tool rebuilds the query live and wraps it in a placeholder block, ready to drop into your stylesheet.
Mobile-first development leans on min-width queries that progressively enhance the layout as the screen grows, while max-width queries are useful for overrides that should only apply to smaller screens.
The range option is handy when a set of styles should apply only between two breakpoints, for example tablet-only tweaks.
Everything is computed in your browser with no network calls, so nothing you enter leaves the page.
The output uses standard CSS that works in every modern browser, and you can edit the generated block freely once you copy it.
It is a fast reference whenever you forget whether you wanted min or max, or which way the comparison runs.
FAQ
Should I use min-width or max-width?
Use min-width for mobile-first designs that add styles as the screen grows, and max-width when you want to override styles only on smaller screens.
Can I generate a query that targets a range of sizes?
Yes. Choose the “Range” bound and enter both a minimum and maximum value to produce a single @media rule combining min-width and max-width.