What breakpoints should I use for responsive design?

Short answer

Add a breakpoint where the layout starts to look wrong, not at device sizes. If you need defaults, 40rem, 48rem, 64rem and 80rem cover most cases.

css

/* Mobile styles are the default — no query needed */

@media (min-width: 40rem)  { /* 640px  — large phone, small tablet */ }
@media (min-width: 48rem)  { /* 768px  — tablet */ }
@media (min-width: 64rem)  { /* 1024px — laptop */ }
@media (min-width: 80rem)  { /* 1280px — desktop */ }

#Write mobile-first

Style the small screen with no query, then use min-width to add complexity as space allows. This means the simplest layout needs the least CSS, and you never have to undo desktop styles for phones.

#Use rem, not px

A px breakpoint ignores the reader's font size. With rem, someone using larger text switches to the simpler layout sooner — which is usually what they want, since their text now needs more room.

#Chasing devices is a losing game

There are hundreds of screen widths and the list changes every year. Resize the browser slowly instead: when the line length gets uncomfortable or the columns get cramped, that is your breakpoint. It might be 53rem. That is fine.

#Many layouts need no breakpoints at all

css

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

Three columns on a desktop, two on a tablet, one on a phone — no media queries. Prefer this whenever the layout allows it.

Fluid type does the same for text:

css

h1 { font-size: clamp(2rem, 5vw, 4rem); }

#Container queries for components

css

.card-wrap { container-type: inline-size; }

@container (min-width: 30rem) {
  .card { grid-template-columns: 8rem 1fr; }
}

This asks how much space the component has rather than the viewport — so the same card works in a sidebar and in a full-width grid without knowing where it is.