Media queries and breakpoints: which screen sizes to design for

Media queries are the part of CSS that applies styles only when a condition is true, most often "the viewport is at least this wide". The widths where a layout changes are called breakpoints, and the best ones come from your content, checked against the screen sizes people really use. This guide is for developers and designers building or fixing a responsive site: the syntax, the media features worth knowing, min-width versus max-width, which units to use, the most common screen resolutions in 2026, and how to choose breakpoints. It belongs to our guide on how to make a website mobile friendly, and builds on responsive web design.

Quick answer

• Syntax: @media (min-width: 48rem) { … } applies the rules inside from 768 px at the default font size.
• Write mobile-first: base styles for phones, then min-width queries that add columns as space grows.
• Pick breakpoints where the layout breaks, not per device. Three or four page-level breakpoints are enough for most sites, for example 30, 48, 64 and 80 em.
• Use em or rem in media queries, so layouts adapt when visitors enlarge their default font size.
• Real screens in August 2026 (StatCounter): phones cluster at 360–414 px wide, tablets at 768–820 px, desktops at 1,280–1,920 px.
• Look beyond width: prefers-reduced-motion, prefers-color-scheme, hover and pointer adapt the page to the person, not just the screen.
• Check the result with the free mobile-friendly test at five widths from 360 to 1440 px.

What are media queries?

A media query is a condition attached to CSS. When the condition matches, the browser applies the rules; when it stops matching (the window is resized, the phone is rotated), the rules stop applying. The condition can test the output type, such as screen or print, and media features such as width, orientation, hover ability or the visitor's system settings.

/* in a stylesheet */
@media (min-width: 48rem) {
  .nav { display: flex; }
}

/* combine features with "and", list alternatives with a comma */
@media (min-width: 48rem) and (orientation: landscape) { … }
@media (max-width: 29.99rem), print { … }

The same conditions work outside a stylesheet: in the media attribute of <link> (a print stylesheet), in <source media="…"> inside <picture> for art direction, and in JavaScript with window.matchMedia().

Range syntax

The newer range syntax reads like maths and avoids the off-by-one gaps of min- and max- pairs:

@media (width >= 48rem) { … }
@media (48rem <= width < 64rem) { … }   /* tablet range only */

It has worked in Chrome, Edge, Firefox and Safari since Safari 16.4 in March 2023. If you still support older Safari versions, keep the min-width form; both do the same thing.

Media types

screen, print and all are the types still in use. @media print is worth ten lines on any site with articles, recipes or invoices: hide navigation and ads, and show link URLs. Leaving out the type means all, which is what you want for layout queries. The only keyword was a workaround for very old browsers and is no longer needed.

The media features worth using

The preference features are also accessibility features. Our guide to motion and prefers-reduced-motion shows how to honour the reduced-motion setting without breaking your animations.

Min-width or max-width: mobile-first or desktop-first?

Mobile-first starts with the phone layout as the default and uses min-width queries to add to it. Desktop-first starts with the desktop layout and uses max-width queries to take things away.

/* mobile-first: the default is one column */
.grid { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid { grid-template-columns: repeat(3, 1fr); } }

Mobile-first is the better default for three reasons. The phone gets the simplest CSS with the fewest overrides. Each query only adds, so the rules are easier to follow. And the design starts from the hardest constraint, a narrow screen, which forces decisions about what matters. Desktop-first is fine for retrofitting an existing desktop site; just avoid mixing both directions for the same component.

Px, em or rem in media queries?

Use em or rem. In media queries both are relative to the browser's default font size (16 px unless the visitor changed it), not to the font size you set on html. So 48rem is 768 px for most visitors. A visitor who set their default text to 20 px gets the tablet layout until 960 px, and their larger text still fits the columns. With px breakpoints, the columns stay narrow while the text grows, and lines get cramped or overflow.

Common screen resolutions in 2026

Breakpoints should not target devices, but you should know where the devices are. These are StatCounter Global Stats' most common screen resolutions worldwide for August 2026, in CSS pixels as the browser reports them:

Source: StatCounter Global Stats, screen resolution stats by device type, worldwide, August 2026. The desktop rows are four of the top six.

What that means for design:

• Phones are 360–414 px wide in portrait. Design the base layout for 360 px, and make sure nothing breaks at 320 px, the width WCAG's reflow criterion uses and what an older small phone or a zoomed browser gives you.
• The long tail is long. The six most common phone resolutions add up to about 42 % of phone traffic, so the widths between them matter as much as the named ones.
• Screen size is not viewport size. Browser toolbars, scrollbars and windows that are not maximised make the viewport smaller than the screen. A 1920 × 1080 laptop at 125 % display scaling reports 1536 × 864.
• Tablets span portrait and landscape, 768 to 1,280 px, so a tablet can get your phone-ish or your desktop layout depending on how it is held.

How to choose responsive breakpoints

1. Build the narrow layout first, at 360 px, with no media queries.
2. Widen the browser slowly. Watch for the width where the layout starts to look wrong: lines of text longer than about 75 characters, cards stretched too wide, a lot of empty space next to a single column.
3. Add a breakpoint there, in em or rem, rounded to a sensible number. That is a content breakpoint: it exists because your layout needs it.
4. Repeat until the widest layout. Most sites end up with three or four page-level breakpoints.
5. Handle components locally. A card that needs to change at a particular width usually needs a container query, not another page breakpoint.

If you want a starting set, these fit the screen sizes above:

/* phones: base styles, no query        (< 480 px) */
@media (min-width: 30em) { … }  /* large phones, small tablets  ≥ 480 px */
@media (min-width: 48em) { … }  /* tablets portrait            ≥ 768 px */
@media (min-width: 64em) { … }  /* tablets landscape, laptops  ≥ 1,024 px */
@media (min-width: 80em) { … }  /* desktops                    ≥ 1,280 px */

CSS frameworks use similar sets. Tailwind CSS defaults to 640, 768, 1,024, 1,280 and 1,536 px; Bootstrap 5 to 576, 768, 992, 1,200 and 1,400 px. Either is a reasonable default if you already use the framework. The mistakes happen when a component is only checked at the breakpoints and never between them.

Fewer breakpoints with intrinsic layout

Many layouts need no media query at all. repeat(auto-fit, minmax(16rem, 1fr)) in grid, flex-wrap: wrap, clamp() for font sizes and spacing, and min() for widths all adapt continuously. The fewer breakpoints you have, the fewer widths there are for something to go wrong between them.

How to test your breakpoints

Render the page at widths across the range and look for overflow:

The tool resizes one loaded page to 360, 414, 768, 1024 and 1440 px, which puts at least one width on each side of the common breakpoints, and names the element that makes the page wider than the screen:

Then drag DevTools' responsive mode through every width from 320 px up, zoom a desktop browser to 200 % and 400 % (which triggers your narrower breakpoints), and set a larger default font size in the browser settings to see your em breakpoints move.

Common mistakes

• Breakpoints named after devices ("iphone", "ipad"). Devices change every year; name them by size or by the layout they create.
• Overlapping or gapped ranges. max-width: 768px and min-width: 768px both match at exactly 768 px. Use min-width only, or the range syntax.
• Too many breakpoints. Ten page-level queries usually mean the base layout is not fluid enough.
• Forgetting the viewport meta tag. Without it, phones report a width of about 980 px and your phone queries never match.
• Hiding instead of adapting. display: none at a breakpoint still downloads the content and removes it for Google's mobile crawler.
• Hover styles for all. Wrap hover-only effects in (hover: hover) so touch devices don't get stuck hover states.

Questions people ask

What are media queries in CSS?

Media queries are CSS conditions that apply a block of styles only when they are true, such as @media (min-width: 48rem) for screens at least 768 px wide. They can test the viewport width and height, orientation, whether the device can hover, and the visitor's settings such as reduced motion or dark mode. They are the tool that changes a layout between phone, tablet and desktop.

What breakpoints should I use for responsive design?

Use the widths where your layout starts to break, usually three or four. A common starting set is 30em (480 px), 48em (768 px), 64em (1,024 px) and 80em (1,280 px) with mobile-first min-width queries. Build the phone layout first, widen the browser until something looks wrong and add a breakpoint there, rather than targeting specific devices.

What are the most common screen resolutions?

For phones, 414 × 896 and 360 × 800 lead, according to StatCounter's worldwide data for August 2026, with most phones between 360 and 414 CSS px wide. For desktops, 1920 × 1080 leads with 22.2 %, followed by 1536 × 864 and 1366 × 768. Tablets start at 768 × 1024. Design for the ranges, since no single size covers most visitors.

Should I use min-width or max-width media queries?

Use min-width for a mobile-first stylesheet: base styles serve phones, and each query adds columns and spacing as the screen gets wider. It keeps the phone CSS simplest and the overrides one-directional. max-width suits desktop-first stylesheets and retrofits. Avoid mixing both for the same component, which creates gaps and overlaps at the boundary widths.

Should media query breakpoints use px, em or rem?

Use em or rem. In media queries both are based on the browser's default font size, usually 16 px, so 48em equals 768 px for most visitors. When someone raises their default text size, em breakpoints move with it and the layout switches to fewer, wider columns before text gets cramped. Pixel breakpoints ignore that setting.

What is the difference between media queries and container queries?

Media queries respond to the whole viewport or device, so they suit page layout: when to show a sidebar or a full navigation bar. Container queries respond to the size of the element a component sits in, so the same card can adapt differently in a wide column and a narrow sidebar. Both work in all major browsers; use them together.