Media queries ask: how wide is the screen? Container queries ask: how wide is this component? That difference decides where breakpoints live, and getting it right is what makes a component reusable somewhere else. Ninety-five point eight one percent of browsers support container queries today.

Use media queries for the page plan

  • A three-column layout collapsing to one column on phones.
  • The difference between the fixed header and a normal-flow document on small screens.
  • Anything a visitor would describe as 'the whole page' per view.

Use container queries for the pieces

.card-wrap { container-type: inline-size; }
@container (min-width: 480px) {
  .card { display: grid; grid-template-columns: 140px 1fr; }
}

The card now knows its own layout rules. Drop it in a sidebar and it stacks, drop it on the home page and it splits into two columns. No media query in the world can do that, because the media query does not know where the card will land.

3. How to convert the classic breakpoint mistakes:

  1. Never write @media (max-width: 480px) to fix one widget.
  2. Do declare container-type on the wrapper. Without it the container query silently matches nothing, an error which is also invisible.
  3. Test in a resizable window, not only the ones in devtools.
A component whose style depends on its container is finally genuinely portable. That is gacor.

Migration rule: touch the page, adjust a media query. Touch a component, reach for a container. Both work in the same file, and neither replaces the other.