Responsive Web Design: Container Queries (@container) vs Media Queries (@media)
1Concept
Media Queries (@media (max-width: 768px)) query viewport dimensions. Container Queries (@container (max-width: 400px)) query parent container dimensions, enabling modular micro-components.
2Architecture Diagram
@media (max-width: 768px) ──► Responsive to BROWSER WINDOW @container (min-width: 350px) ──► Responsive to PARENT COMPONENT WIDTH!
3Code Example
Stage 0 Language Foundations
.card-wrapper {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex;
flex-direction: row;
}
}4Expected Output
[Card switches to horizontal layout whenever parent container exceeds 400px]
5Key Takeaways
- ✓Container queries allow building self-contained responsive components.
- ✓Design mobile-first with min-width media queries.
- ✓Combine flex-wrap with container queries for resilient layouts.