Fortschritt im Lernpfad

0 von 14 abgeschlossen (0%)

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;
    }
}