4 breakpoints from 640px to 1440px. Foundation is the notable holdout that defines breakpoints in em, which makes them respond to the user's browser font size.
| Name | Value | Pixels | Media query | Devices ≥ |
|---|---|---|---|---|
small | 0 | — | (no media query — default) | 242 |
medium | 40em | 640 | @media screen and (min-width: 40em) | 99 |
large | 64em | 1024 | @media screen and (min-width: 64em) | 63 |
xlarge | 75em | 1200 | @media screen and (min-width: 75em) | 53 |
xxlarge | 90em | 1440 | @media screen and (min-width: 90em) | 38 |
Configuration
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);How Foundation 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 Foundation breakpoints?
Foundation v6.8 ships 5 tiers: small (0px), medium (640px), large (1024px), xlarge (1200px), xxlarge (1440px).
Are Foundation breakpoints min-width or max-width?
Foundation is mobile-first, so every breakpoint is a min-width query. Styles apply from that width upward.
How do I change the Foundation 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 Foundation use em?
Breakpoints in em respond to the user's browser font-size setting, so someone who has increased their default text size gets the layout that suits it. Pixel breakpoints ignore that preference.