How to choose between media and container queries

Media queries and container queries solve different layout problems. A media query responds to the viewport or device, so it is the right tool for page-wide changes such as switching the overall navigation pattern or changing the main layout columns.

A container query responds to the space a component receives. That makes it a better fit for reusable cards, toolbars, and panels that may appear in a wide main column, a narrow sidebar, or an embedded widget without knowing the page width.

A useful rule is to start with the component boundary. If the decision belongs to the page, use a media query. If the decision belongs to a reusable component, establish a container and use a container query. Many interfaces use both: media queries for the shell and container queries for the pieces inside it.

Keep the base layout usable before either query applies. Add enhancements at meaningful content breakpoints, test from 320px upward, and avoid choosing breakpoints only because they match a particular device.