Breakpoints belong to your layout
Not to a list of phone models. Add one where your own content stops working — and see how many container queries make unnecessary.
Breakpoints belong to your layout
Not to a list of phone models. Add one where your own content stops working — and note how many of them container queries make unnecessary.
min-width, max-width, and the 0.02 gap
min-width is mobile first: the base styles are the small ones and each query adds to them. It produces less CSS because the narrow case needs no overrides.
max-width is desktop first, and needs the 0.02 subtraction. Viewport widths can be fractional on a zoomed or scaled display, so a max-width: 768px beside a min-width: 768px leaves 768.5px matching neither. Subtracting 0.02 closes it.
em breakpoints are relative to the browser's default font size, not your root. They scale when a reader increases it, which px breakpoints do not — a reader at 24px default gets the layout intended for a narrower screen, which is usually what they want.
Container queries removed most of the need
A card that reflows at 400px should do it because the card is 400px wide, not because the viewport is. With container-type: inline-size and @container, the same component works in a sidebar and in a main column without either knowing about the other.
What is left for viewport breakpoints: page-level structure, the number of columns in a top-level grid, and anything that genuinely depends on the device rather than the space.
Do not chase devices
A breakpoint set derived from current phone widths is out of date within a year and was never right for windowed desktop browsers, which are any width at all. Resize your own layout until it looks wrong, and put a breakpoint there.