Media Queries

Summary

`@media` rules apply CSS conditionally based on viewport width, orientation or device features — the core mechanism behind responsive design. Responsive CSS should adapt to the content and available space rather than targeting a long list of specific devices, which makes layouts more durable over time.

• 1Add breakpoints to make a fixed layout responsive at mobile/tablet/desktop widths. Test the result on both a successful path and an invalid or unexpected input.
• 2Practice mobile-first media queries (`min-width` rather than `max-width`). Test it with at least one normal case and one edge case so you can explain the behavior confidently.
• 3Learn `prefers-color-scheme` for dark mode support.