What are container queries and how do they differ from media queries?

What are container queries and how do they differ from media queries?

• A. Container queries apply to an element's size; media queries apply to viewport size.
• B. Container queries apply to an element's size; media queries apply to viewport size.
• C. Container queries replace media queries entirely in modern CSS.
• D. Container queries affect only inline elements.

Answer: (A)

Container queries are about the size of an element itself. They let you style a component based on how wide (or tall) that specific container is, not on the overall browser window. To use them, you mark a parent as a container (with container-type) and then write @container rules that apply when the container reaches certain dimensions. For example, a card inside a flexible layout can increase its font size or switch layout when the card’s own width hits a threshold, even if the viewport size stays the same. Media queries, by contrast, look at the viewport or other global environment features (like the window width, height, orientation, or color scheme) and apply styles based on those values. So when you resize the window, the page’s breakpoints can change. Thus, the main distinction is what size the query uses as the reference: container queries respond to an element’s size, while media queries respond to the viewport. They’re complementary: container queries handle component-level adaptability, whereas media queries handle page-level breakpoints. Container queries don’t replace media queries entirely, and they can affect any element inside the container, not just inline ones.

Container queries are about the size of an element itself. They let you style a component based on how wide (or tall) that specific container is, not on the overall browser window. To use them, you mark a parent as a container (with container-type) and then write @container rules that apply when the container reaches certain dimensions. For example, a card inside a flexible layout can increase its font size or switch layout when the card’s own width hits a threshold, even if the viewport size stays the same.

Media queries, by contrast, look at the viewport or other global environment features (like the window width, height, orientation, or color scheme) and apply styles based on those values. So when you resize the window, the page’s breakpoints can change.

Thus, the main distinction is what size the query uses as the reference: container queries respond to an element’s size, while media queries respond to the viewport. They’re complementary: container queries handle component-level adaptability, whereas media queries handle page-level breakpoints. Container queries don’t replace media queries entirely, and they can affect any element inside the container, not just inline ones.