Responsive, mobile first layout

Responsive design means one page that works on everything from a 360px wide phone to a wide monitor. Mobile first means you write the base styles for small screens first. Then you add min-width media queries, rules that switch on as the screen gets wider.

This keeps the phone version simple instead of undoing desktop styles. Add the viewport meta tag, so phones use their real width instead of shrinking a desktop layout. Use relative units such as rem for text, and percentages or fr for widths.

Let images shrink with max-width: 100%, and let Grid and Flexbox wrap. Custom properties (CSS variables) let you change spacing or sizes in one place for each screen size. Container queries let a component respond to the space it has, rather than the whole screen.

Watch sticky and fixed position elements, which can cover content on a small screen. Test by resizing and in DevTools device mode, then on a real phone.