Responsive Web Design

On container queries.

Ethan Marcotte Responsive Web Design

An excellent piece from Ethan on the concept of container queries and why they’re important. I always find that whenever Ethan starts rambling on about something to do with web design it’s usually a good idea to pull out your pen and paper and start taking notes.

Ethan uses the header design component from a website he worked on recently, The Toast, as a reference to why container queries are important and how they can make designing responsive components much easier by placing media queries upon the module itself (the container – thus container queries) rather than applying global media queries to them.

If we finally get the introduction of container queries (not through lack of effort) it will greatly reduce the number of media queries on the site. We will still have the major breakpoints, where the design layout changes significantly — for example from three columns to two columns to one column — but all of the ‘tweak points’ will wind up in container queries.