CSS Breakpoints

A breakpoint is a screen width at which your layout changes: a one-column list becomes two columns, a menu icon becomes a row of links.

Common values

There are no official ones. These are widely used starting points:

Let content choose the breakpoint

Don’t memorize device widths. New phones and tablets appear every year. Instead:

1. Build the page at a small width.
2. Slowly drag the browser wider.
3. When something looks stretched, awkward or too empty, that is your breakpoint. Add a media query right there.

A navigation bar that gets crowded at 700px should change at 700px, even if that is not a “standard” size.

Keep the number small

Most pages need only two or three breakpoints. Each one adds CSS you have to maintain and test.

Use consistent units and tidy rules

1
2
3

/* Keep each breakpoint's rules together and in order, smallest to largest */
@media (min-width: 48em) { /* 768px */ }
@media (min-width: 64em) { /* 1024px */ }

em units in media queries follow the visitor’s browser font size, so someone who has made their text larger gets the “tablet” layout earlier, which is usually what they need.