No standard exists. These are simply the values the most frameworks happen to agree on.
Every framework side by side
Columns are the widths at least two frameworks agree on. A cell shows the tier name that framework gives to that width. Values only one framework uses are in the last column — they carry no comparison information.
| Framework | Unit | 480 | 576 | 600 | 640 | 768 | 992 | 1024 | 1200 | 1280 | 1440 | 1536 | 1600 | 1920 | Only here |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Tailwind CSS | rem | · | · | · | sm | md | · | lg | · | xl | · | 2xl | · | · | — |
| Bootstrap | px | · | sm | · | · | md | lg | · | xl | · | · | · | · | · | 1400 xxl |
| MUI (Material UI) | px | · | · | sm | · | · | · | · | lg | · | · | xl | · | · | 900 md |
| Bulma | px | · | · | · | · | · | · | desktop | · | · | · | · | · | · | 769 tablet, 1216 widescreen, 1408 fullhd |
| Foundation | em | · | · | · | medium | · | · | large | xlarge | · | xxlarge | · | · | · | — |
| Chakra UI | em | sm | · | · | · | md | lg | · | · | xl | · | 2xl | · | · | — |
| Ant Design | px | · | sm | · | · | md | lg | · | xl | · | · | · | xxl | · | — |
| Vuetify | px | · | · | sm | · | · | · | · | · | lg | · | · | · | xl | 960 md, 2560 xxl |
| Material Design 3 | dp | · | · | Medium | · | · | · | · | Large | · | · | · | Extra-large | · | 840 Expanded |
| Open Props | em | --sm | · | · | · | --md | · | --lg | · | · | --xl | · | · | --xxl | 240 --xxs, 384 --xs |
Breakpoints vs. real device widths
How many catalogued devices sit at or above each value. A breakpoint that separates almost nothing is not earning its place.
| Breakpoint | Frameworks using it | Devices ≥ this width | Share of devices |
|---|---|---|---|
| 240px | 1 | 227 | 94% |
| 384px | 1 | 182 | 75% |
| 480px | 2 | 104 | 43% |
| 576px | 2 | 99 | 41% |
| 600px | 3 | 99 | 41% |
| 640px | 2 | 99 | 41% |
| 768px | 5 | 95 | 39% |
| 769px | 1 | 89 | 37% |
| 840px | 1 | 67 | 28% |
| 900px | 1 | 65 | 27% |
| 960px | 1 | 63 | 26% |
| 992px | 3 | 63 | 26% |
| 1024px | 4 | 63 | 26% |
| 1200px | 5 | 53 | 22% |
| 1216px | 1 | 53 | 22% |
| 1280px | 3 | 50 | 21% |
| 1400px | 1 | 39 | 16% |
| 1408px | 1 | 38 | 16% |
| 1440px | 2 | 38 | 16% |
| 1536px | 3 | 24 | 10% |
| 1600px | 2 | 24 | 10% |
| 1920px | 2 | 10 | 4% |
| 2560px | 1 | 4 | 2% |
Frameworks
Questions
What are the standard CSS breakpoints?
There is no standard. The values that recur most across major frameworks are 768px (5 frameworks), 1200px (5 frameworks), 1024px (4 frameworks), 600px (3 frameworks), 992px (3 frameworks), 1280px (3 frameworks). Everything else is a framework-specific choice.
How many breakpoints do I need?
Usually three or four. Across the 242 devices catalogued here there are only 60 distinct CSS widths, and they cluster tightly. Add a breakpoint when the layout breaks, not because a framework offers a tier.
Should breakpoints be in px, rem or em?
rem or em breakpoints scale with the user's browser font-size setting, which is better for accessibility — Tailwind v4, Foundation and Chakra all use them. px breakpoints are more predictable but ignore that preference. Both are defensible; be consistent.
Should I design mobile-first?
Yes, in practice. Mobile-first means unprefixed styles are the baseline and each breakpoint adds on top with min-width. Every framework here except pure Material Design uses it, because progressive enhancement produces less CSS than progressive removal.