Guided Notes

Responsive Design

The viewport meta tag, media queries, mobile-first CSS, breakpoints, responsive images, and container queries.

What is responsive design?

Slide 1 / 5

Responsive design makes one website work well on every screen β€” phones, tablets, laptops, and large monitors β€” by letting the layout adapt to the available space.

Its ingredients: β€’ the viewport meta tag, β€’ flexible layouts (Flexbox, Grid, percentages), β€’ flexible images and media, β€’ media queries to adjust the design at certain widths.

More than half of web traffic comes from phones, so this isn't optional.

← CSS Grid