UI Design
Breakpoint
A breakpoint is the screen width at which a layout changes to fit the space better. Below it the design might stack into one column; above it, it might spread into several.
Why it matters
Breakpoints are how a single design adapts gracefully from phones to wide monitors. Choosing them well keeps content readable at every size.
In depth
The classic mistake is setting breakpoints at specific device sizes, like a particular phone or tablet, since the lineup of devices keeps changing. A more durable approach is to place breakpoints where the content itself starts to break — where lines grow too long or columns get too cramped. This keeps the layout tied to the design rather than to a snapshot of today's hardware.
Real-world example
A three-column article grid collapses to a single column on a narrow phone screen once the viewport drops past a set width. That width is the breakpoint.
Related terms