Media Query Generator
Generate CSS media queries for responsive designs, via preset or manually, and adapt your layout to fit every screen size. Runs in your browser, GDPR-compliant.
Your inputs are processed in your browser and are not transmitted to our servers. Note: third-party resources (e.g. advertising and analytics from Google/Cloudflare) and an optional PayPal donation link may transfer data when loading or when clicked. Browser extensions or plugins may be able to read content that is visible in the input fields.
The result will appear here …
How to use this tool (video)
This video is hosted on YouTube. When you play it, data may be sent to Google.
Media Query Generator
The media query generator produces ready-to-use CSS media queries for responsive designs. Use a device preset for phone, tablet, desktop and large screen, or enter min and max width yourself.
What is a media query?
A media query is a CSS building block that applies styles only under certain conditions, for example above a specific screen width. This lets your website adapt flexibly to different devices.
Presets for common devices
The presets follow common breakpoints: phone below 576px, tablet between 576 and 992px, desktop from 992px and large screen from 1200px. You can overwrite every preset with your own values afterwards.
Combine min and max width
Besides min width alone you can generate a closed range with min and max width. In addition, the orientation (landscape or portrait) can be included in the condition.
Frequently asked questions
What is a media query?
A media query is a CSS building block that applies styles only under certain conditions, for example above a specific screen width. This lets your website adapt flexibly to different devices.
Which device presets are available?
The tool offers presets for phone, tablet, desktop and large screen. The values follow common breakpoints and can be overwritten with your own figures afterwards.
Can I combine min and max width?
Yes. Besides a plain min width you can create a closed range with min and max width. This is useful for tablet ranges between two breakpoints.
What does the orientation do?
You can include the landscape or portrait orientation in the condition. This lets you set styles specifically for devices in portrait or landscape mode.
Which frameworks does the generator suit?
The generator outputs general CSS that you can take straight into your own stylesheets. The presets follow common framework breakpoints, but you can also use your own values.
Are my values uploaded anywhere?
No. Generating the media queries runs entirely in your browser. Your values are not transmitted to our server or stored.