What are CSS media queries and how are they used?

Explanation

CSS media queries apply styles conditionally based on device characteristics: viewport width/height, orientation, resolution, and media type (screen, print). They are the foundation of responsive design, allowing layouts to adapt to different screen sizes. Common patterns include min-width breakpoints (mobile-first) and max-width breakpoints (desktop-first). Media queries can also target dark mode (prefers-color-scheme) and reduced motion (prefers-reduced-motion) for accessibility.