One page, every screen
Most people browse on phones. responsive design means one page that looks right on a phone, a tablet and a big monitor. Media queries apply CSS only when the screen matches a condition.
Mobile first
- Mobile first: write the simple, one-column phone layout as the default, then add @media (min-width: …) rules for wider screens.
- Choose breakpoints where *your* layout starts to look wrong, not for specific devices.
- The page also needs <meta name="viewport" content="width=device-width, initial-scale=1"> in its head.
- Other useful queries: (prefers-color-scheme: dark), (prefers-reduced-motion: reduce), (hover: hover).