Breakpoints are the viewport widths at which a responsive layout changes structure. A common, safe set is about 640 px for large phones, 768 px for tablets, 1024 px for small laptops and 1280 px for desktops, written as min-width queries in rem. The better approach is to treat that set as a starting point and move breakpoints to where your own content starts to look wrong, rather than chasing device sizes.
Common breakpoints at a glance
| Range | Typical breakpoint | What lives here |
|---|---|---|
| Small phones | base styles (no query) | 320–375 px wide phones |
| Large phones | 480–640 px | 390–440 px phones in portrait, phones in landscape |
| Tablets | 768 px | iPad mini and tablets in portrait |
| Small laptops, tablets in landscape | 1024 px | iPad landscape, 13” laptops with zoom |
| Desktop | 1280 px | Most laptop and desktop screens |
| Wide desktop | 1440–1536 px | Large monitors |
Write these in rem (40rem, 48rem, 64rem, 80rem) so they move when users enlarge their default font size.
How popular frameworks set breakpoints
| Framework | Breakpoints (min-width) |
|---|---|
| Tailwind CSS v4 | 640, 768, 1024, 1280, 1536 px |
| Bootstrap 5 | 576, 768, 992, 1200, 1400 px |
| Material Design 3 window size classes | compact < 600, medium 600–839, expanded 840–1199, large 1200–1599, extra-large ≥ 1600 (dp) |
They broadly agree on the shape: a tablet switch around 600–768, a desktop switch around 1000–1200, and one or two wide sizes. Details: Tailwind breakpoints and Bootstrap breakpoints.
Why device-based breakpoints age badly
It is tempting to set breakpoints at exact device widths: 375 for an iPhone, 390 for a newer one, 414 for a Plus model. The problem is that devices change every year. Current iPhones alone range from 375 to 440 CSS pixels wide (see the iPhone viewport chart), Android phones add many more widths, and foldables and split-screen windows land anywhere.
A layout that works only at specific device widths will break at the ones between them. Breakpoints should mark where the layout needs to change, and the layout should be fluid in between.
How to choose breakpoints from your content
- Build the narrowest layout first, at about 320 px.
- Widen the viewport slowly in Chrome DevTools’ Responsive mode.
- Stop when the design starts to look wrong: line lengths get too long, cards stretch, there is room for a second column, or the navigation could fit in a row.
- Add a breakpoint at that width, rounded to a sensible rem value.
- Repeat up to your widest supported layout.
You usually end up with three to five breakpoints. If you have more than six, some of them are probably fixing component-level problems that a container query or a fluid technique would handle better.
Fewer breakpoints with fluid techniques
Modern CSS removes the need for many breakpoints:
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))adds and removes columns automatically.flex-wrap: wrapwith aflex-basislets items wrap when they run out of space.clamp()scales font sizes and spacing smoothly:font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem).width: min(100% - 2rem, 70rem)creates a container with side padding and a maximum width in one line.
Keep breakpoints for structural changes: navigation style, number of page columns, sidebar placement.
Breakpoints and tablets
Tablets are where breakpoint choices are most visible. An iPad in portrait is 744–1032 px wide depending on the model, so it can fall on either side of 768 or 1024. Rotation then moves it across another breakpoint. Test tablets in both orientations, and remember that iPad Safari usually requests the desktop site. More in how to view a website as an iPad in Chrome.
Testing your breakpoints
- Turn on Show media queries in DevTools’ device toolbar to see every breakpoint as a bar; click a bar to jump to it.
- Test each breakpoint at its exact width and 1 px below.
- Check named phones and tablets, not just widths. A mobile view extension with device presets is the quickest way to click through pages at several device sizes.
The full method is in how to test responsive design.
Frequently asked questions
What are the standard breakpoints for responsive design?
There is no official standard. Common values are 640, 768, 1024 and 1280 px (Tailwind) or 576, 768, 992, 1200 and 1400 px (Bootstrap). Pick one set and use it consistently.
What breakpoint should I use for mobile?
In mobile-first CSS, phones need no breakpoint: they get the base styles. The first breakpoint, usually between 480 and 640 px, marks where the layout can start using more space.
How many breakpoints should a website have?
Three to five is typical. Use fluid layouts between them, and add a breakpoint only where the content needs a structural change.