Media queries

Media queries apply styles based on environment features — not only viewport width. Group layout, input, and user preference concerns separately.

					@media (min-width: 48rem) { .layout { grid-template-columns: 1fr 1fr; } }
@media (hover: hover) and (pointer: fine) {
  .menu-item:hover { background: var(--surface-hover); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}
				

Modern range syntax (`width >= 48rem`) reads clearer than min/max pairs. Distinguish viewport media queries from container queries — they solve different portability problems.

On interviews: mobile-first ordering, preference media features, and when hover styles are inappropriate.

The trade-off is fewer breakpoints through fluid layout versus explicit layout jumps when content truly reflows.

Common pitfalls: device-specific breakpoints; ignoring reduced motion or coarse pointer users.

Checklist:

• Prefer content- and feature-driven breakpoints.
• Support prefers-reduced-motion and color-scheme.
• Use range syntax for clarity.
• Keep page shell queries separate from @container.