UX Glossary · B
Breakpoint
A viewport width at which a layout changes, usually because the current arrangement stops working.
A breakpoint is the width at which a layout switches to a different arrangement: three columns become two, a horizontal navigation becomes a drawer, a sidebar drops below the content.
Content-led rather than device-led
The common mistake is picking breakpoints from device sizes. The iPhone widths of any given year are a moving target, and designing to them produces a layout tuned for hardware that is superseded in eighteen months.
The better method is to widen the browser until the layout looks wrong, and put a breakpoint there. A line of text that has grown past roughly 75 characters is hard to read. Three cards squeezed to 180 pixels each stop being legible. Those are the real signals, and they belong to your content rather than to anyone’s phone.
What has changed recently
Container queries, now supported in every major browser, let a component respond to the width of its own container rather than the viewport. That is a genuine improvement: a card in a sidebar and the same card in a main column can behave differently without knowing anything about the page.
In practice
Most layouts need fewer breakpoints than they have. Fluid units like clamp() and grid’s
auto-fit handle a lot of what used to need an explicit switch.