What are Media Queries?

Media queries are CSS conditions that apply styles based on viewport, device, or user preferences.

When to use Media Queries?

Use media queries for responsive breakpoints, dark mode, and reduced motion settings.

What is the anatomy of Media Queries?

The anatomy of media queries includes features such as width, height, orientation, prefers-color-scheme, and prefers-reduced-motion, as well as range syntax and container-query fallback patterns. It also involves strategies like mobile-first versus desktop-first approaches.