What a breakpoint is
A breakpoint is a screen width where the layout changes because the current arrangement stops working. Media queries apply different styles above or below that width.
- Pick breakpoints based on where content breaks, not on specific device names
- A mobile first approach writes base styles for small screens then adds min width queries
- Fewer well chosen breakpoints beat many fragile ones
Container queries
Media queries react to the viewport, but a card placed in a narrow sidebar still gets wide screen styles. Container queries let a component respond to its own parent width instead, so the same card adapts wherever it lives.
Choosing a layout
Fluid between breakpoints
Between breakpoints, use relative units and modern functions like clamp so type and spacing scale smoothly instead of jumping only at thresholds.
Key idea
Set breakpoints where content actually breaks, design mobile first, and reach for container queries so components adapt to their own space rather than the whole viewport.