Web Guidelines
Breakpoints
Device breakpoints are defined by CSS media queries and are the basis for responsive web design. We have six pre-defined media queries for devices ranging from “Phone” to “Large Desktop” with “Phone” being the default.
Available Breakpoints
Below are the six breakpoints we use for responsive design.
| Breakpoint | Breakpoint Size |
|---|---|
| Phone | <400px |
| Phablet | ≥400px |
| Tablet | ≥750px |
| Large tablet or small desktop | ≥1000px |
| Desktop | ≥1200px |
| Large desktop | ≥1400px |
CSS
Copy
/* Phone (less than 400px) */
/* No media query for `Phone` since this the default */
/* Phablet (large phones, 400px and up) */
@media (min-width: 400px) { … }
/* Tablet (750px and up) */
@media (min-width: 750px) { … }
/* Large tablet or small desktop (1000px and up) */
@media (min-width: 1000px) { … }
/* Desktop (1200px and up) */
@media (min-width: 1200px) { … }
/* Large desktop (1400px and up) */
@media (min-width: 1400px) { … }