What you will learn
- Add the viewport meta tag and explain why it is needed
- Write min-width media queries that build up from a mobile layout
- Test a page at different screen widths in developer tools
A responsive page adapts to the screen it is viewed on. The first step is the viewport meta tag in the head: <meta name="viewport" content="width=device-width, initial-scale=1">. Without it, phones pretend to be a wide desktop screen and shrink the page, so text becomes tiny. With it, the page width matches the device and your CSS can respond properly.
Mobile-first means writing your base styles for small screens, then adding media queries for wider ones. A rule inside @media (min-width: 768px) { ... } only applies when the screen is at least 768 pixels wide. For example, product cards can stack in a single column by default, then switch to a three-column grid inside the media query. Small screens get the simplest, lightest version.
Choose breakpoints where your content starts to look wrong, not around specific devices. Drag the browser window narrower and wider, and add a breakpoint when lines get too long or elements get cramped. Developer tools include a device mode that simulates phone and tablet sizes, but testing on a real phone is still worthwhile, as touch and scrolling feel different from a mouse.