Around 640, 768, 1024 and 1280 px — the values most frameworks converge on, because they sit in the gaps between real device clusters rather than on top of them. Add a fifth only when a specific component demands it.
Start from where devices actually sit
A breakpoint placed on a common device width is a breakpoint that fires mid-population. Across the 104 phones released since 2020 in this catalogue, the CSS widths cluster tightly:
Two things fall out of that table. First, the entire modern phone range fits between 360 and 707 CSS px — a span of 347 px. A layout that works at 360 and at 440 needs no breakpoint in between. Second, there is a wide empty band above the phones and below the tablets. That gap is where a breakpoint belongs.
What the frameworks agree on
Ten frameworks, and only 13 values that more than one of them uses. That agreement is not coordination — it is independent convergence on the same empty bands.
| Breakpoint | Frameworks using it | Which | Sits between |
|---|---|---|---|
| 480 px | 2 | Chakra UI, Open Props | Large phone / small tablet |
| 576 px | 2 | Bootstrap, Ant Design | Phone landscape / tablet portrait |
| 600 px | 3 | MUI (Material UI), Vuetify, Material Design 3 | Phone landscape / tablet portrait |
| 640 px | 2 | Tailwind CSS, Foundation | Phone landscape / tablet portrait |
| 768 px | 5 | Tailwind CSS, Bootstrap, Chakra UI, Ant Design, Open Props | Tablet portrait / tablet landscape |
| 992 px | 3 | Bootstrap, Chakra UI, Ant Design | Tablet landscape / laptop |
| 1024 px | 4 | Tailwind CSS, Bulma, Foundation, Open Props | Tablet landscape / laptop |
| 1200 px | 5 | Bootstrap, MUI (Material UI), Foundation, Ant Design, Material Design 3 | Laptop / desktop |
| 1280 px | 3 | Tailwind CSS, Chakra UI, Vuetify | Laptop / desktop |
| 1440 px | 2 | Foundation, Open Props | Desktop / wide desktop |
| 1536 px | 3 | Tailwind CSS, MUI (Material UI), Chakra UI | Desktop / wide desktop |
| 1600 px | 2 | Ant Design, Material Design 3 | Desktop / wide desktop |
| 1920 px | 2 | Vuetify, Open Props | Desktop / wide desktop |
The rule that matters more than the numbers
Name breakpoints after sizes, never after devices. The moment a media query is called $tablet, someone will change its value to fix an iPad and break every 800px browser window on a desktop. md and lg are deliberately meaningless, and that is the feature.
The corollary: do not write breakpoints for specific devices. A query targeting device-width: 390px matches four different phones today and will match a different four next year. The device catalogue exists so you can check a number, not so you can hard-code it.
Content breakpoints beat global ones
The global breakpoint set handles page structure. Individual components should respond to their own container, which is what container queries are for — a card that needs two columns at 400px of available space should say so, regardless of how wide the viewport is.
/* Structure: four global steps, named by size */
@media (width >= 40rem) { /* sm — 640px */ }
@media (width >= 48rem) { /* md — 768px */ }
@media (width >= 64rem) { /* lg — 1024px */ }
@media (width >= 80rem) { /* xl — 1280px */ }
/* Components: respond to the space they are actually in */
.card-list { container-type: inline-size; }
@container (width >= 26rem) {
.card { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
}How many is too many
Every breakpoint is a state you have to test, in every component, in both directions. Four global steps means four states. Seven means seven, and in practice it means three of them are never checked. If you find yourself adding a fifth and a sixth, the layout is usually fighting a fixed width somewhere — find that instead.
Questions
Should breakpoints be in px or rem?
rem, if you want the layout to respond when a user raises their default font size — a 640px breakpoint stays at 640px, a 40rem breakpoint moves to 800px at a 20px root. Tailwind v4 switched to rem for exactly this reason. Note that em and rem in media queries both resolve against the browser default, not your :root font-size.
What is the difference between min-width and max-width breakpoints?
Direction of accumulation. min-width is mobile-first: base styles are the small case, each query adds on top. max-width is desktop-first: base styles are the large case, queries subtract. Mixing both in one project produces overlapping ranges and specificity fights — pick one.
Do I need a breakpoint for tablets?
Usually one, around 768px, and it is doing double duty for tablet portrait and large phone landscape. You almost never need a separate tablet-landscape breakpoint — at that width a tablet is a small laptop and the laptop layout is correct.
Where do I put a breakpoint for the iPhone?
Nowhere. Modern iPhones report between 375 and 440 CSS px, which is inside a single layout regime. If a design needs to change between a 390px and a 430px iPhone, the design is too tightly coupled to a width. See iPhone screen sizes for the actual values.