What are container queries? How do they differ from media queries?
Container queries are a CSS mechanism that lets you change styles depending on the size of the container itself, inside which the element is located. Logically, they work the same way as media queries, but they target not the viewport, but the parent block.
Example of a container query
.card {
container-type: inline-size; /* enable container measurement */
}
@container (max-width: 500px) {
.title {
font-size: 18px;
}
}Here, .title will change its font size only if the width of the .card container is ≤ 500px, not the width of the browser window.
How they differ from media queries
| Characteristic | Media Queries | Container Queries |
|---|---|---|
| What they respond to | Viewport size | Container size |
| Where they are applied | Global adaptation of the whole page | Local adaptation of a component |
| Approach | "page → components" | "components → independent adaptation" |
| Problem they solve | Rearranging for screens | Universal, reusable components |
Key idea
- Media queries: adapt the layout "from the outside", based on the screen.
- Container queries: adapt components "from the inside", independent of the surroundings.
Summary: container queries are the next stage after media queries. They let you create fully reusable, independent, and responsive components that are not tied to the width of the entire screen.
If needed - I can show an example of a real UI that broke with media queries and was fixed with container queries.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.