Skip to content
Convertto

CSS Media Query Generator

Generate responsive breakpoint media queries, with common device presets.

To generate a media query, choose whether you want min-width, max-width, a range, or a preference query for dark mode, reduced motion or print. EM units are recommended over pixels because they respect a user's browser font-size setting.

Runs in your browser
Privacy
Runs entirely in your browser — nothing is uploaded
Cost
Free, unlimited, no sign-up

Frequently asked questions

Should breakpoints use px or em?

EM is safer. Pixel breakpoints ignore the user's browser font-size preference, so someone who has increased their default text size can end up with a cramped desktop layout on a small window. EM breakpoints scale with that setting.

How to use the css media query generator

  1. 1Choose the query type.
  2. 2Set the min width.
  3. 3Set the max width.
  4. 4Choose the unit.
  5. 5The result appears immediately — copy or download it.

Embed this tool

Put the working css media query generator on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

Share this tool

Related tools

CSS Clamp GeneratorGenerate fluid clamp() values that scale smoothly between two viewport widths.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.CSS Clip Path GeneratorCut an element to a polygon, circle, ellipse or inset, and copy the clip-path.CSS Multi-Column GeneratorFlow text into balanced columns with a rule between them.

Last updated

More css generators