Breakpoint

Definition

A breakpoint is the point at which a layout changes, declared as a condition in a media query such as @media (min-width: 48rem). Below the condition one layout applies; at or above it, another does.

Let content choose the number

Breakpoints named after devices age badly, because device sizes keep changing. The durable approach is to widen the browser slowly and add a breakpoint at the width where the layout stops looking right. That usually produces two or three breakpoints, not the dozen a device list would suggest.

Mobile first is a default, not a rule

Writing the narrow layout as the base and adding min-width queries on top means the simplest layout needs no query at all, and each query adds rather than overrides. It also matches the reality that the narrow case is the constrained one and deserves to be designed first.

Modern layout removes many of them

flex-wrap, grid-template-columns with auto-fill and minmax, and functions like clamp and min adapt continuously without any breakpoint. Reach for a breakpoint when the arrangement of the page must genuinely change, not merely when something needs to be smaller.

Common failures

• Pixel breakpoints that ignore the user's text size preference.
• A minimum column width larger than the narrowest supported viewport.
• Content hidden at one width and never reachable at any other.
• Overlapping ranges where two rules both apply.
• Layouts tested at named device widths but never in between.

Review question

Resize slowly from 320 pixels to full width. Does anything overflow, overlap, or become unreadable between your breakpoints? The gaps between tested widths are where the defects live.