Container Queries vs Media Queries
Understand when to use container queries versus viewport media queries for component-based design.
The Fundamental Difference
Media queries respond to the viewport dimensions. Container queries respond to the parent container dimensions. This distinction determines which tool to use for which problem.
Media Queries: When to Use
Use media queries for:
- Global page layout changes (one vs two columns)
- Showing/hiding large page sections (navigation drawer on mobile)
- Page-level typography baseline scaling
- Print styles
- User preference queries (dark mode, reduced motion)
All lessons in this course
- container-type and container-name
- @container Rules and Breakpoints
- Container Query Units: cqw cqh
- Container Queries vs Media Queries