Breakpoints aren't about devices — they're about content. Design where your layout breaks, not for specific phone models.
Common Breakpoints
- 576px — Large phones
- 768px — Tablets
- 992px — Small laptops
- 1200px — Desktops
Mobile-First Approach
Start with the smallest screen. Add complexity as space allows. This prevents desktop-first designs that feel cramped when shrunk.
Test Real Content
Lorem ipsum hides layout problems. Test with long German words, short labels, and real images before shipping.