1. What are breakpoints
A breakpoint is a viewport width value at which the site layout changes. Breakpoints are used in media queries to determine when to apply particular styles.
For example, if below 480px you have one layout and above 480px another, then 480px is a breakpoint.
2. How to choose breakpoints
To determine breakpoints, you need to place the most popular devices along a conceptual line from 0 to 2000+ pixels. Devices naturally group together:
- Phones: 320–480px
- Tablets (portrait): 600–768px
- Tablets (landscape): 768–1024px
- Desktops: 1280–1600px
- Large desktops: 1920px+
Two approaches to defining them
| Approach | Description | Example |
|---|---|---|
| Through real devices | Boundaries pass through the widths of specific devices | 320px, 768px, 1224px, 1600px |
| Between groups | Boundaries pass between groups of devices | 600px, 900px, 1200px, 1800px |
Both approaches are valid. In real projects, breakpoints are usually already defined in the technical specification or design mockups.
3. Rules for working with breakpoints
- Choose them once for the whole project — all blocks restructure at the same breakpoints
- Avoid different breakpoints for different blocks — this creates chaos in the code
- Exception: sometimes one specific block (for example, the menu) doesn’t fit into any breakpoint — then it’s acceptable to add a separate media query just for it
Menu example
At a width of 1350px the full desktop menu is shown. At 1349px — a shortened version (smaller logo). And at tablet width — the mobile menu (burger). To transition between the full and shortened menu, a separate breakpoint is added just for this block.
4. Summary table
| Topic | Key point |
|---|---|
| Breakpoints | Chosen once for the whole project; the exception is individual blocks |
