Q24: How do Container Queries (@container) differ from Media Queries (@media)?
Media Queries (@media) evaluate global viewport browser dimensions. Container Queries (@container) evaluate the width/size of direct parent containers, allowing components to adjust layouts based on local available space.
Container Query Setup
/* 1. Establish container context on parent */
.card-wrapper {
container-type: inline-size;
container-name: card-container;
}
/* 2. Style component based on parent width */
@container card-container (min-width: 400px) {
.card {
display: flex;
}
}💡 The card component switches to flex layout whenever its parent wrapper expands beyond 400px.
Key Takeaways
@mediaqueries monitor global viewport dimensions.@containerqueries adapt component layouts to local parent element sizes.
Knowledge Check
What CSS property must be applied to a parent element to enable descendant container queries?