Modul 9: Responsive Design

lock
Bevorstehend

Mache deine Webseite auf allen Geräten nutzbar mit Media Queries

Ziele dieses Moduls
  • Sie koennen Media Queries einsetzen, um Layouts für verschiedene Bildschirmgrössen anzupassen
    Anwenden

Heute werden Webseiten auf Smartphones, Tablets, Laptops und Desktops angezeigt. Responsive Design sorgt dafür, dass deine Seite überall gut aussieht.

Was ist Responsive Design?

Responsive Design bedeutet, dass sich das Layout an die Bildschirmgrösse anpasst. Auf dem Handy stapeln sich Elemente untereinander, auf dem Desktop nebeneinander.

Die drei Säulen:

  • Flexible Grids: Layouts mit %, fr, flexbox, grid
  • Flexible Bilder: max-width: 100% verhindert Überlauf
  • Media Queries: CSS für verschiedene Bildschirmgrössen
/* Wichtig: Viewport Meta-Tag im HTML <head> */
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->

/* Mobile First Approach (empfohlen!) */
/* Standard-CSS für Mobile */
.container {
    padding: 20px;
}

.columns {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Ab Tablet (768px) */
@media (min-width: 768px) {
    .container {
        padding: 40px;
    }
    
    .columns {
        flex-direction: row;
    }
}

/* Ab Desktop (1024px) */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

Note

Breakpoints: Wann umschalten?

Typische Breakpoints (kannst du anpassen!):

  • Mobile: bis 767px
  • Tablet: 768px - 1023px
  • Desktop: 1024px+
  • Wide Desktop: 1440px+

Tipp: Teste immer in den Browser DevTools (F12 → Responsive Mode)!

Responsive Typography

Auch Schriftgrössen sollten sich anpassen:

/* Basis-Schriftgrösse für Mobile */
body {
    font-size: 16px;
}

h1 {
    font-size: 28px;
}

/* Grössere Schriften auf Desktop */
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
    
    h1 {
        font-size: 48px;
    }
}

/* Oder mit clamp() (modern!) */
h1 {
    font-size: clamp(28px, 5vw, 48px);
    /* Min: 28px, Ideal: 5% der Viewport-Breite, Max: 48px */
}

Challenge

Übung: Responsive Portfolio

Erstelle eine einfache Portfolio-Seite, die auf allen Geräten gut aussieht:

Layout:

  • Navigation: Auf Mobile untereinander, auf Desktop nebeneinander
  • Hero-Bereich: Bild + Text (auf Mobile gestapelt, auf Desktop nebeneinander)
  • Projekt-Grid: 1 Spalte (Mobile), 2 Spalten (Tablet), 3 Spalten (Desktop)
  • Footer: Kontaktinfos (auf Mobile gestapelt)

Inhalt: Stelle dich vor, zeige 6 'Projekte' (können auch Hobbys, Interessen sein)

Test: Öffne die DevTools und teste bei 375px (iPhone), 768px (iPad) und 1440px (Desktop)!

/* Starter: Responsive Project Grid */

.projects {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 Spalte */
    gap: 20px;
    padding: 20px;
}

@media (min-width: 768px) {
    .projects {
        grid-template-columns: repeat(2, 1fr); /* Tablet: 2 Spalten */
    }
}

@media (min-width: 1024px) {
    .projects {
        grid-template-columns: repeat(3, 1fr); /* Desktop: 3 Spalten */
        padding: 40px;
    }
}