Material Design 3 M3 · window size classes · dp
600 · 840 · 1200 · 1600
4 breakpoints from 600px to 1600px. Material 3 replaced fixed breakpoints with window size classes measured in density-independent pixels. Compact covers most phones in portrait.
| Name | Value | Pixels | Media query | Devices ≥ |
|---|---|---|---|---|
Compact | 0dp | — | width < 600dp | 242 |
Medium | 600dp | 600 | 600dp ≤ width < 840dp | 99 |
Expanded | 840dp | 840 | 840dp ≤ width < 1200dp | 67 |
Large | 1200dp | 1200 | 1200dp ≤ width < 1600dp | 53 |
Extra-large | 1600dp | 1600 | width ≥ 1600dp | 24 |
Configuration
// Jetpack Compose
val windowSizeClass = calculateWindowSizeClass(activity)
when (windowSizeClass.widthSizeClass) {
WindowWidthSizeClass.Compact -> { /* phone portrait */ }
WindowWidthSizeClass.Medium -> { /* foldable, tablet portrait */ }
WindowWidthSizeClass.Expanded-> { /* tablet landscape, desktop */ }
}How Material Design 3 compares
| 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 |
Questions
What are the default Material Design 3 breakpoints?
Material Design 3 M3 ships 5 tiers: Compact (0px), Medium (600px), Expanded (840px), Large (1200px), Extra-large (1600px).
Are Material Design 3 breakpoints min-width or max-width?
Material Design 3 uses window size classes.
How do I change the Material Design 3 breakpoints?
Override them in the configuration — see the snippet on this page. Changing them is usually a mistake unless you have a concrete layout reason; the defaults are chosen to sit between real device clusters.
Why does Material Design 3 use dp?
Pixel breakpoints are predictable and map directly to device widths, which makes them easy to reason about — at the cost of ignoring the user's font-size preference.
Other frameworks
Tailwind CSS5 tiersBootstrap5 tiersMUI (Material UI)4 tiersBulma4 tiersFoundation4 tiersChakra UI5 tiersAnt Design5 tiersVuetify5 tiersOpen Props7 tiers
Values taken from the official Material Design 3 documentation (https://m3.material.io/foundations/layout/applying-layout/window-size-classes), version M3, verified 2026-08-07.