2.8 Responsives Design

Einführung

Responsives Design sorgt dafür, dass Webseiten auf unterschiedlichen Geräten gut aussehen. Mit `@media`-Queries können Regeln für verschiedene Bildschirmgrössen definiert werden. Mobile-First bedeutet, zuerst für kleine Geräte zu gestalten. Breakpoints legen fest, wann Layoutänderungen stattfinden. `vh` und `vw` beziehen sich auf Viewport-Höhe und -Breite. Touch-freundliche Grössen verbessern die Bedienbarkeit auf mobilen Geräten.

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