CSS – Responsive Webdesign

1. Was bedeutet Responsive Webdesign?

Responsive Webdesign bedeutet, dass sich das Layout einer Webseite an unterschiedliche Bildschirmgrößen anpasst.

Eine Webseite soll sowohl auf Smartphones als auch auf Tablets und Computern gut lesbar und bedienbar sein.

2. Der Viewport

Der Viewport ist der sichtbare Bereich einer Webseite im Browser.

Für eine korrekte Darstellung auf mobilen Geräten wird normalerweise folgende HTML-Angabe verwendet:

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

Diese Angabe gehört in den head-Bereich des HTML-Dokuments.

3. Was sind Media Queries?

Mit Media Queries können CSS-Regeln abhängig von Eigenschaften des Ausgabegeräts oder Viewports angewendet werden.

CSS-Code

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Die Regel wird angewendet, wenn die Viewport-Breite höchstens 600px beträgt.

4. max-width und min-width

Beispiel

@media (min-width: 768px) {
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

Ab einer Viewport-Breite von 768px erhält der Container zwei Spalten.

5. Breakpoints

Breakpoints sind Bildschirmbreiten, an denen sich das Layout einer Webseite ändert.

6. Mobile First

Mobile First bedeutet, dass zuerst das Layout für kleine Bildschirme entwickelt wird.

Anschließend wird das Layout für größere Bildschirme erweitert.

CSS-Code

.container {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .container {
        grid-template-columns: repeat(3, 1fr);
    }
}

Ergebnis

Verändern Sie die Breite des Browserfensters, um die unterschiedlichen Spaltenzahlen zu sehen.

7. Responsive Grid

Mit CSS Grid und Media Queries kann die Anzahl der Spalten verändert werden.

CSS-Code

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .grid {
        grid-template-columns: 1fr;
    }
}

Ergebnis

8. Flexible Breiten

Statt ausschließlich feste Pixelwerte zu verwenden, können relative Größen eingesetzt werden.

CSS-Code

.container {
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
}

Ergebnis

9. Responsive Bilder

Bilder sollten sich an die Breite ihres Containers anpassen können.

CSS-Code

img {
    max-width: 100%;
    height: auto;
}

Mit max-width: 100% wird verhindert, dass ein Bild größer als sein Container dargestellt wird.

Beispiel

10. Responsive Schriftgrößen mit clamp()

Die CSS-Funktion clamp() ermöglicht flexible Größen mit einem Mindestwert und einem Höchstwert.

CSS-Code

h1 {
    font-size: clamp(20px, 4vw, 38px);
}

Der Browser berechnet eine flexible Schriftgröße, die mindestens 20px und höchstens 38px beträgt.

Ergebnis

11. Responsive Navigation

Auf kleinen Bildschirmen kann eine horizontale Navigation in eine vertikale Navigation umgewandelt werden.

CSS-Code

.navigation {
    display: flex;
    gap: 10px;
}

@media (max-width: 480px) {
    .navigation {
        flex-direction: column;
    }
}

Ergebnis

12. Responsive Seitenlayout

Auf großen Bildschirmen können Sidebar und Inhalt nebeneinander stehen.

Auf kleinen Bildschirmen werden die Bereiche untereinander angeordnet.

CSS-Code

.layout {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 15px;
}

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

Ergebnis

13. Interaktive Geräte-Vorschau

Wählen Sie eine Bildschirmgröße aus. Die Vorschau zeigt, wie sich ein Layout bei unterschiedlichen Viewport-Breiten verändert.

14. Typische Fehler beim Responsive Design

15. Praktische Übungen

@media (max-width: 600px) {
    /* CSS-Regeln */
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
}

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

img {
    max-width: 100%;
    height: auto;
}

h1 {
    font-size: clamp(18px, 4vw, 36px);
}

.navigation {
    display: flex;
}

@media (max-width: 479px) {
    .navigation {
        flex-direction: column;
    }
}

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

16. Zusammenfassung

Responsive Webdesign sorgt dafür, dass Webseiten auf unterschiedlichen Bildschirmgrößen benutzerfreundlich bleiben.

Mit Media Queries können CSS-Regeln abhängig von der Viewport-Breite angewendet werden.

Mobile First, flexible Breiten, responsive Bilder, CSS Grid, Flexbox und clamp() sind wichtige Werkzeuge für moderne responsive Webseiten.