Since the beginning of web design, breakpoints have been central to responsive design. The model is simple, effective, easy to teach, and remains commonly used today.
Initially, breakpoints addressed the problem of varying screen sizes. However, modern interfaces are now component-centric, nested, and frequently reused across diverse settings. In such a scenario, relying on global viewport width for local layout decisions is often inadequate.
This article suggests a new perspective, better suited to the modern web: constructing fluid, intrinsic components that naturally adapt, while treating conditional rules as deliberate, local exceptions.
Media queries are still valuable, but should primarily address actual device capabilities and user preferences, rather than being the main layout mechanism. We will revisit this point later.
What Breakpoints Solved, and Why They Won
Breakpoints significantly improved fixed desktop layouts by enabling teams to support phones, tablets, and desktops through explicit CSS branches.
The model was straightforward:
- Select key viewport widths.
- Define layout and sizing changes for those widths.
- Add rules as product complexity increases.
This simplicity made breakpoints standard.
A typical pattern still found in many codebases is:
.page {
width: 90%;
font-size: 16px;
}.card-grid {
display: grid;
gap: 1em;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, <span class="