2.8 Responsive design

Introduction

Responsive design ensures that websites look good on different devices. With `@media` queries, rules can be set for different screen sizes. Mobile-first means designing for small devices first. Breakpoints define when layout changes occur. `vh` and `vw` refer to viewport height and width. Touch-friendly sizes improve usability on mobile devices.

@media (max-width: 600px) {
    .container {
        flex-direction: column;
        padding: 1em;
    }
}