Media Query Generator
Generate responsive CSS media queries with optional minimum, maximum and orientation conditions.
Loading the local tool workspace…
What is Media Query Generator?
Media Query Generator combines optional width limits and orientation into a responsive CSS rule template.
How to use Media Query Generator
- 01
Enter a minimum width, maximum width or both.
- 02
Optionally limit the query to portrait or landscape orientation.
- 03
Copy the generated @media block and add the responsive declarations.
Media Query Generator FAQ
Should I use min-width or max-width?
Min-width works naturally for mobile-first enhancement, while max-width can suit desktop-first overrides; consistency matters more than either choice alone.
Is Media Query Generator private to use?
Yes. CSS text, values and previews are processed locally in your browser and are not sent to Toolnera.