What are CSS media queries?

CSS media queries apply styles conditionally based on the device's characteristics such as screen width, height, orientation, or resolution. Syntax: @media (max-width: 768px) { ... } — styles inside apply only when the viewport is 768px wide or less. Common breakpoints target mobile (max-width: 767px), tablet (768px–1024px), and desktop (min-width: 1025px). Use min-width for a mobile-first approach (default styles for mobile, override for larger screens) — this is the recommended pattern. Media queries are the foundation of responsive design, allowing one HTML document to look good on all screen sizes.