Responsive Breakpoints in 2026: Which Widths to Design For

Updated October 20, 2026

Short answer: Design mobile-first and add breakpoints where your layout breaks, not for specific devices. In 2026, phones are 360–440 CSS px wide in portrait (with clusters at 360, 375, 390–402, 412 and 428–440) and tablets 744–1032 px, so min-width breakpoints around 40em (640px), 48em (768px) and 64em (1024px) suit most sites. Also test at 320 CSS px, the width WCAG 1.4.10 Reflow requires.

Free tool: CSS media query generator — Media queries for the phones and tablets you pick, and breakpoints suggested from 51 real device widths.

There is no single correct set of breakpoints. Start with a layout that works at 320–440 CSS pixels, widen the window until the design starts to look wrong, and add a min-width breakpoint there. For most sites that ends up near 40em (640px), 48em (768px) and 64em (1024px). The real device widths below show which sizes your layout has to handle between those points.

What widths do phones and tablets actually have?

Breakpoints work in CSS pixels, the size your stylesheet sees once the page has a viewport meta tag, not the screen's hardware resolution. These are the portrait widths of the 51 devices MobileCheck emulates:

Two things stand out. Phones sit in a narrow band, about 360 to 440 pixels, so one fluid phone layout covers them all. And in landscape the same phones are 640 to 956 pixels wide, which is tablet territory: a phone on its side can cross your tablet breakpoint while having only about 300 to 400 pixels of height left after the browser bars. The full list, with heights and pixel ratios, is in mobile viewport sizes.

Where should I put breakpoints?

Let content decide. Common device widths tell you which ranges to test, but a breakpoint belongs where a line gets too long, a card grid gets too sparse or the navigation stops fitting. A practical starting set for a mobile-first site:

• Base styles, no media query: single column, for 320–599px. This is every phone in portrait.
• Around 40em (640px): two-column cards and larger type. Phones in landscape and the unfolded Fold reach this.
• Around 48em (768px): tablet layouts and maybe a sidebar. Note that the iPad mini (744px) and the unfolded Fold (690px) sit just below it, so they get the smaller layout; decide whether that's what you want.
• Around 64em (1024px): full desktop navigation and multi-column layouts. Large iPads in portrait land here, so make sure your desktop navigation also works by touch.

Avoid breakpoints set exactly at one device's width, such as max-width: 390px. A phone one pixel wider gets a different layout, and the list of devices changes every year.

How do I write breakpoints that last?

Mobile-first with min-width

Write the phone layout as the default and add complexity as space grows. Phones then load the simplest CSS path, and no device falls through a gap between a max-width and a min-width query:

.cards { display: grid; gap: 1rem; }

@media (min-width: 40em) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

Use em, not px

Media queries in em are based on the browser's default font size, so when someone raises their default text size, the layout switches to a roomier version earlier instead of squeezing bigger text into narrow columns. 40em is 640px at the default 16px. See the large text guide for why this matters.

Let components respond to their own space

A card in a sidebar and the same card in the main column have different room on the same screen. Container queries let the component adapt to its container instead of the viewport:

.card-list { container-type: inline-size; }

@container (min-width: 30em) {
  .card { display: grid; grid-template-columns: 8rem 1fr; }
}

Container queries work in all current mobile browsers. Combined with fluid grids such as repeat(auto-fit, minmax(min(100%, 16rem), 1fr)), they remove many page-level breakpoints entirely.

Check the in-between widths

Bugs live between breakpoints: at 600px a two-column layout may not have kicked in yet while the single column looks stretched. Drag your browser window slowly across the whole range rather than jumping between preset devices, and watch for content that sticks out; the guide to content wider than the screen helps when it does.

On iPhone vs Android

• Display zoom settings change the width. iPhone's Display Zoom and Android's display size setting make the interface larger by reporting a narrower CSS width, as narrow as 320px on some models. Your layout has to handle widths below the "official" device size.
• iPads ask for the desktop site. Safari on iPad sends a Mac user agent by default, so server-side detection treats it as a desktop. Base layout decisions on media queries, not the user agent.
• Android widths are more varied. iPhones cluster at a handful of widths, while Android phones span 344 to 412px and more with foldables and display settings, so test at least one 360px Android phone.

Which widths should I test?

A compact set that covers most visitors: 320px (WCAG Reflow and zoomed phones), 360px (small Android), 375px (iPhone SE), 393–402px (current iPhones and Pixels), 430–440px (large phones), 744px and 820px (iPads in portrait), 1024px (large iPad or small laptop), plus one phone in landscape. MobileCheck can check any of its 51 devices in one run, with screenshots of each and every layout problem highlighted; start with the responsive design checker or the free mobile check.

Sources

• MDN: Using media queries
• MDN: CSS container queries
• web.dev: Responsive web design basics
• W3C: Understanding SC 1.4.10 Reflow

Related guides