Responsive breakpoints in 2026: which screen sizes to test

There is no single list of "correct" breakpoints — but there are the screen widths your visitors actually use. This guide gives you a breakpoint scale that works, the device widths behind it, and a way to test it all at once.

The widths that matter in 2026

These are CSS viewport widths (not physical pixels), taken from the AKCLNT Responsive Checker device list:

Notice how tightly phones cluster: almost every phone sold today is between 360 and 450px wide. That's why one solid phone layout, tested at both ends of that range, beats several phone breakpoints.

A breakpoint scale that works

/* Mobile-first: base styles are for phones (< 576px) */

@media (min-width: 576px)  { /* large phones, landscape phones */ }
@media (min-width: 768px)  { /* tablets portrait, iPad mini */ }
@media (min-width: 992px)  { /* tablets landscape, small laptops */ }
@media (min-width: 1200px) { /* laptops, desktops */ }
@media (min-width: 1400px) { /* wide desktops */ }

This is the Bootstrap 5 scale. Tailwind's defaults are sm 640, md 768, lg 1024, xl 1280, 2xl 1536. Either is fine — consistency matters more than the exact numbers.

Mobile-first vs desktop-first

With mobile-first (min-width) you write the simplest layout first and add columns as space grows. With desktop-first (max-width) you build the big layout and then undo it for small screens, which usually means more overrides. For new projects, go mobile-first.

/* Mobile-first card grid */
.cards { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 768px)  { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

Let content choose the breakpoint

Device names change every year; your content doesn't. The best breakpoints are where your layout starts to look wrong:

1. Open your page in AKCLNT Responsive Checker in Single mode.
2. Drag the width slider slowly from 1440px down to 320px.
3. Each time something looks cramped — a nav wrapping to two lines, cards getting too narrow, text lines too long — note the width. That's a breakpoint.

Fewer breakpoints with fluid CSS

Modern CSS lets many components adapt without any media query at all:

/* Fluid type: 32px on phones, up to 64px on desktop */
h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); }

/* Auto-fitting grid: as many 260px+ columns as fit */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

/* Container queries: the card adapts to its own width, wherever it's placed */
.card-wrap { container-type: inline-size; }
@container (min-width: 480px) { .card { display: flex; gap: 16px; } }

Container queries are supported in all current major browsers and are ideal for reusable components like cards and sidebars.

Test every range at once

Pick one device from each row of the table above — for example Galaxy S24 (360), iPhone 16 (393), iPhone 17 Pro Max (450), iPad Air (820) and a 1440 desktop — and load them together in Multi mode. Then rotate to landscape with R: landscape phones (around 700–950px wide) are the range people forget most often.

FAQ

What are the standard responsive breakpoints?

A practical set is 576px, 768px, 992px, 1200px and 1400px (the Bootstrap 5 scale). Tailwind uses 640, 768, 1024, 1280 and 1536px. Both work; what matters is testing the real widths around them.

What phone width should I design for?

Most current phones are 360–450 CSS pixels wide. Design and test at 360px (small Android), 390–393px (common iPhone and Pixel) and 430–450px (large phones).

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

Mobile-first with min-width is the most common approach: write base styles for phones, then add min-width queries as the screen grows. It keeps the phone CSS simplest and avoids overriding desktop styles.