CSS Media Query Generator for Phones and Tablets

Pick phones and tablets or enter your breakpoints, and copy ready-made CSS media queries in both the modern range syntax and classic min-width/max-width — with breakpoints suggested from 51 real device widths.

/* Portrait */
@media (344px <= width <= 440px) and (orientation: portrait) {
  /* … */
}

/* Portrait */
@media (min-width: 344px) and (max-width: 440px) and (orientation: portrait) {
  /* … */
}

/* under 576 px */
@media (width < 576px) {
  /* … */
}

/* 576 px to under 900 px */
@media (576px <= width < 900px) {
  /* … */
}

/* 900 px and wider */
@media (width >= 900px) {
  /* … */
}

/* under 576 px */
@media (max-width: 575.98px) {
  /* … */
}

/* 576 px to under 900 px */
@media (min-width: 576px) and (max-width: 899.98px) {
  /* … */
}

/* 900 px and wider */
@media (min-width: 900px) {
  /* … */
}

How to use the generated queries

Write the base styles for the narrowest screen first, then let each breakpoint add layout as space appears — that is the "mobile-first" block in part 2. Device-picked queries from part 1 are best for testing and targeted fixes ("the header wraps on 360 px Androids"), not for building a layout per phone: phone widths cluster between 344 and 440 px, many models share a width, and new ones appear every year. The full list with each model's size is on the mobile viewport sizes page.

Range syntax or min-width / max-width?

Media Queries Level 4 range syntax — (width >= 600px), (600px <= width < 900px) — reads like maths and has no gaps: a band ending at < 900px and the next starting at >= 900px cover every width, even fractional ones at odd zoom levels. It works in Chrome and Edge 104+, Safari 16.4+ and Firefox 63+. The classic min-width/max-width form works everywhere; because both ends are inclusive, the generator ends each band at .98 (max-width: 899.98px) so no width matches two bands.

Orientation and pixel ratio

orientation: landscape simply means the viewport is wider than it is tall. That also happens on Android when the on-screen keyboard opens and shrinks the viewport, so a phone held upright can suddenly match a landscape query. Base layouts on width, and use orientation only for things like full-screen media. min-resolution (with -webkit-min-device-pixel-ratio for old Safari) matches high-density screens; for images, srcset and image-set() are usually the better tool.

How the suggested breakpoints are found

The tool sorts the distinct portrait widths of the devices and splits them at the widest gaps between neighbouring widths — natural breaks, where no device lives. Each breakpoint is placed inside a gap, on a common value such as 600 or 900 when one fits, so no real device sits right at an edge. Remember that the viewport meta tag is required for any of this: without it, phones report a 980 px wide viewport and your phone queries never match.

More free tools: color contrast checker · tap target size checker · mobile font size calculator · device mockup generator · all tools