Comparison
Container queryvsMedia query
Container query
the same card renders as a row in the wide column and as a stack in the narrow one, with no props involved.
A conditional block applied on the size of an ancestor container rather than the viewport, which lets a component respond to the space it is actually in. It removes the main reason components had to be told which layout they were in, and it makes a component library genuinely reusable across page widths. The container must opt in with `container-type`, and doing so creates containment that changes how the element sizes itself — usually harmless, occasionally the bug.
Full entry →Media query
the sidebar collapses below 768 pixels because you picked that number once and never revisited it.
A conditional block applied on properties of the viewport or device — width, orientation, pointer type, colour scheme, motion preference. Width breakpoints are the familiar use and the weakest one, because they describe the window rather than the space a component actually has. The non-width queries are the more valuable half and the more forgotten one: `prefers-color-scheme` and `prefers-reduced-motion` are both accessibility features.
Full entry →