Media query generator — breakpoint templates for responsive CSS

How to use the media query generator

1. Choose the Breakpoints: Tailwind CSS, Bootstrap 5, Material Design 3 window classes, Simple (phone / tablet / desktop) or Custom.
2. For Custom, list Custom breakpoints (name: px), one per line, such as tablet: 768.
3. Pick the Approach: Mobile-first (min-width), Desktop-first (max-width) or Range syntax.
4. Choose Units: px, em or rem.
5. Tick the extra queries you want, Dark mode, Reduced motion, Hover-capable pointer, Short landscape screens and Print, then copy the CSS.

What it does and when to use it

Media queries let one stylesheet change the layout at certain screen widths, called breakpoints. Typing them out is easy, but keeping the order, the units and the exact numbers consistent across a project is where mistakes creep in. This tool gives you the whole skeleton at once, matching a known system.

Use it when you start a stylesheet, or when you want your own CSS to break at the same widths as Tailwind or Bootstrap components on the same page. Pair it with the CSS reset generator and the CSS variables generator for a full starting stylesheet. In a Tailwind project, add an extra breakpoint with the Tailwind config generator instead. MDN’s guide to using media queries explains every feature.

How it works

Mobile-first lists blocks from small to large with min-width. Desktop-first lists them from large to small with max-width set 0.02px below each breakpoint. Range syntax uses width >= and adds one example block between the first two breakpoints. Custom breakpoints are sorted by size, and em or rem values are px ÷ 16.

Worked examples

Tailwind, mobile-first, px. With the extra queries unticked, the output is five blocks, from @media (min-width: 640px) { to @media (min-width: 1536px) {, each with a comment such as /* lg: 1024px and up */.

Bootstrap 5, desktop-first.

/* below lg (992px) */
@media (max-width: 991.98px) {
  /* … */
}

The blocks run from max-width: 1399.98px down to 575.98px.

Custom sizes in em with range syntax. Breakpoints phone 480, tablet 768, laptop 1200, Hover-capable pointer ticked. You get @media (width >= 30em), 48em and 75em, then @media (30em <= width < 48em) { for phone-only styles, and @media (hover: hover) and (pointer: fine) { for mouse and trackpad users.

Limits and tips

• Container queries are not generated. For components that respond to their parent’s width rather than the screen, write @container rules yourself.
• Test real devices. Breakpoints are a starting point; add one where your layout actually breaks.
• Custom lines without a positive number are ignored.