HTML & CSS Interview Question #105

How should responsive breakpoints be chosen?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

Breakpoints should be introduced where the content or component no longer fits or communicates effectively. They should respond to the design's needs rather than attempting to target every phone or tablet model.

Detailed Explanation

A practical workflow is to build a flexible layout, resize it through the supported range, and add a breakpoint where the design needs a meaningful structural adjustment. Component-level container queries can further reduce dependence on global viewport breakpoints.

Code Example

/* The breakpoint exists because this component
   needs more room for two columns. */
@media (min-width: 56rem) {
    .article-layout {
        grid-template-columns: 2fr 1fr;
    }
}