Container Queries vs Media Queries
- CSS Basics
- Selectors & Specificity
- Box Model & Units
- Typography & Text Styling
- Colors & Color Spaces
- Positioning & Stacking Context
- Flexbox
- Grid
- Grid Advanced
- Responsive Design
- Container Queries
- Pseudo-classes & Pseudo-elements
- Modern Selectors
- CSS Custom Properties
- CSS Functions
- Transitions & Animations
- Transforms
- Forms & Input Styling
- CSS Architecture & Methodologies
- Accessibility in CSS
- Performance & Optimization
- View Transitions & Modern APIs
- Cascade Layers & Scope
The Core Difference
A media query reacts to properties of the browser viewport - its width, height, orientation, or color scheme. A container query reacts to properties of a specific containing element, regardless of how large the viewport itself is.
A Concrete Illustration
Imagine a card component used in two places: the main content area (wide) and a sidebar (narrow) - both visible at the same time on the same desktop-sized viewport.
- A media query cannot tell these two cards apart - both would receive the exact same styles, since the viewport width is identical for both.
- A container query correctly gives the wide card in the main area a different layout than the narrow card in the sidebar, because each queries its own container's width, not the shared viewport.
When to Use Each
| Use case | Better tool |
|---|---|
| Overall page layout (sidebar appears/disappears) | Media query |
| A reusable component that must adapt wherever it is placed | Container query |
| Dark mode / print styles | Media query (container queries do not cover these) |
They Are Complementary, Not Competing
Most real projects use both: media queries handle the big-picture page structure, while container queries handle how individual components adapt within whatever space that page structure gives them. Container queries do not replace media queries - they solve a problem media queries were never designed to solve.