What does this tool do?
The Media Query Generator builds CSS @media rules for responsive design in seconds. Enter a min and/or max value and pick width or height as the type to get a valid media query, or jump to common breakpoint presets like Mobile, Tablet, Laptop, and Desktop 4K with one click. It is handy for front-end developers of every level who build responsive interfaces.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
Preset breakpoints and customization
The tool offers seven standard breakpoint buttons, from Mobile S at 320px to Desktop 4K at 2560px; clicking one sets the min value automatically. You can also type custom min and max values to define an exact range, or set either to 0 to disable that condition. Choosing height instead of width lets you generate queries for vertical breakpoints as well.
Frequently asked questions
What happens if I enter both a min and a max value?
The two conditions are joined with 'and', producing a query such as (min-width: 768px) and (max-width: 1024px) that only applies within the range you specify.
Why would I set a field to 0?
A value of 0 turns that condition off. Leave max at 0 if you only want a lower bound, or set min to 0 for an upper bound only. This lets you create one-directional queries.
Can I target something other than width?
Yes. Choose height from the Type dropdown to generate media queries based on viewport height, which is useful for adjusting layouts on short screens.
Is Media Query Generator free?
Yes. Media Query Generator and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. Media Query Generator works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.