Guide
Choosing breakpoints that match real screens
Decide breakpoint sets based on actual devices, content and layout goals, not guesswork.
Picking breakpoints feels like magic, but it’s mostly just probability management. You want to pick numbers that catch the most common device widths.
Don't chase specific devices
New phones come out every year. If you set a breakpoint specifically for the "iPhone 14 Pro Max", it will be wrong for the "iPhone 16 Ultra" next year.
The Major Ranges
Instead, think in layout shifts:
- ~640px (Mobile to Tablet): Usually where a single column becomes two, or a hamburger menu becomes a sidebar.
- ~1024px (Tablet to Laptop): Where touch interfaces often give way to mouse/cursor layouts, and content gets more breathing room.
- ~1280px+ (Desktop): Where you cap your max width so lines of text don't become impossible to read.
Use our Screen Size tool to see where popular devices fall, but treat them as data points, not targets.
Useful tools
Screen size and layout simulator
Turn diagonal inches, resolution and device pixel ratio into real viewport sizes and layout guidance.
Viewport and DPR calculator
Convert physical pixels and device pixel ratio into CSS viewport width and height with clear examples.
Aspect ratio helper
Simplify ratios, match target sizes and work with common aspect ratios for components and layouts.