Why @media falls short in 2026

A 2010 tool for a 2010 problem

@media (min-width: 768px) { ... }
@media (min-width: 1024px) { ... }
@media (min-width: 1280px) { ... }

Media queries answer the question "how wide is the viewport?" — your browser window. In 2010 that question was almost always equivalent to "how wide is my component's available space?"

In 2026 it's not. Your component might live in:

• A 320px sidebar inside a 1600px page.
• A 800px modal centered on a 1280px page.
• A 100vw section that breaks into 2 columns on tablets.

Same component, three different "available widths" — but @media only knows about the viewport. Result: brittle, breakpoint-heavy CSS that breaks the moment the layout changes.

The 2026 tools

• `@container` — query the PARENT element's width, not the viewport.
• `clamp(min, ideal, max)` — fluid sizing without breakpoints.
• `grid + auto-fit + minmax` — layouts that reflow without media queries.
• Logical properties (margin-inline) — RTL-friendly with zero LTR-specific code.

This module covers all four. After B6 you'll write ~2 media queries per project where you used to write 6.

What media queries are STILL good for

• prefers-color-scheme — dark mode (B5).
• prefers-reduced-motion — accessibility (A5).
• prefers-contrast — high-contrast mode.
• min-width for ONE major mobile/desktop split.

These aren't going away. The point is the OTHER 80% of media queries — the ones tracking layout breakpoints — those should be replaced by container queries + intrinsic sizing.