CSS breakpoints: which screen sizes to design for

01

A sensible starting set

Most sites do well with a handful of breakpoints, written mobile-first (styles for phones by default, then min-width queries for larger screens):

• Phones: the default, no media query (roughly 320–479px)
• Large phones: min-width 480px
• Tablets: min-width 768px
• Laptops: min-width 1024px
• Desktops: min-width 1280px, with a max-width on the content so lines don’t get too long

.grid { display: grid; gap: 16px; }
@media (min-width: 768px)  { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }

02

Let content decide

Slowly widen the browser and watch the page. Where something looks cramped, too wide or awkward, that is where a breakpoint belongs, even if it is 900px and not a device size.

03

Use flexible layouts between breakpoints

Fluid sizes need fewer breakpoints. Grid with auto-fit, clamp() for type and min() for widths adapt smoothly at every width.

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }

04

Test the widths in between

Bugs hide between breakpoints: a menu that wraps at 830px, a table that overflows at 700px. Test common device widths (360, 390, 768, 1024, 1280, 1440) and sweep everything in between.