Responsive Design Grundlagen

Responsive Design bedeutet, dass deine Webseite auf jedem Geraet gut aussieht — ob Smartphone, Tablet oder grosser Desktop-Monitor. In der heutigen Zeit, wo ueber 60% des Web-Traffics von Mobilgeraeten kommt, ist Responsive Design nicht optional, sondern absolut notwendig.

Was ist Responsive Design?

Responsive Design passt das Layout einer Webseite automatisch an die Bildschirmgroesse an:

Smartphone (375px)    Tablet (768px)     Desktop (1440px)
┌──────┐              ┌──────────┐       ┌────────────────┐
│ Nav  │              │  Nav     │       │    Nav         │
├──────┤              ├────┬─────┤       ├────┬──────┬────┤
│      │              │    │     │       │    │      │    │
│ Main │              │Main│Side │       │Side│ Main │Side│
│      │              │    │     │       │    │      │    │
├──────┤              ├────┴─────┤       ├────┴──────┴────┤
│Footer│              │  Footer  │       │    Footer      │
└──────┘              └──────────┘       └────────────────┘

Der Viewport Meta-Tag

Ohne diesen Tag wird deine Seite auf Mobilgeraeten gezoomt dargestellt wie eine Desktop-Seite. Fuege ihn immer ein:

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

Parameter	Bedeutung
`width=device-width`	Breite = Geraetebreite
`initial-scale=1.0`	Kein Zoom beim Laden

Dieser Tag gehoert in den <head> jeder HTML-Seite.

Relative Einheiten statt feste Pixel

Der Schluessel zu Responsive Design: Verwende relative Einheiten!

Prozent (`%`)

/* Statt fester Breite */
.container {
    width: 800px;  /* Bricht auf kleinen Bildschirmen ab */
}

/* Besser: Relative Breite */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

rem und em

/* rem: Relativ zur Root-Schriftgroesse (html) */
html { font-size: 16px; }
h1 { font-size: 2.5rem; }   /* = 40px */
p { font-size: 1rem; }       /* = 16px */

/* em: Relativ zur Schriftgroesse des Elternelements */
.card {
    font-size: 1rem;
    padding: 1.5em;    /* = 1.5 * font-size des Elements */
}

Viewport-Einheiten (vw, vh)

/* vw = 1% der Viewport-Breite */
.hero-title {
    font-size: 5vw;  /* Wird mit dem Viewport groesser/kleiner */
}

/* vh = 1% der Viewport-Hoehe */
.hero {
    min-height: 100vh;  /* Volle Bildschirmhoehe */
}

/* dvh = Dynamic Viewport Height (beruecksichtigt Mobile-Browser-UI) */
.hero {
    min-height: 100dvh;
}

clamp(): Die Allzweckwaffe

/* clamp(minimum, bevorzugt, maximum) */
h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
    /* Mindestens 1.5rem, maximal 3rem, dazwischen 4vw */
}

.container {
    width: clamp(300px, 90%, 1200px);
}

.card {
    padding: clamp(1rem, 3vw, 2.5rem);
}

Vergleich der Einheiten

Einheit	Basis	Ideal fuer
`px`	Fest	Borders, Schatten
`%`	Elternelement	Breiten
`rem`	Root font-size	Schriftgroessen, Abstaende
`em`	Eltern font-size	Komponenteninterne Abstaende
`vw` / `vh`	Viewport	Hero-Sektionen, Schriftgroessen
`dvh`	Dynamischer Viewport	Mobile Fullscreen
`ch`	Breite des “0”-Zeichens	Textbreiten (60-75ch ideal)

Fluid Layouts

Ein “fluid” Layout passt sich stufenlos an, ohne spezifische Breakpoints:

/* Fluid Container */
.container {
    width: min(90%, 1200px);
    margin: 0 auto;
}

/* Fluid Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
}

/* Fluid Typografie */
body {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

h1 {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem);
}

Fluid Spacing

:root {
    --space-sm: clamp(0.5rem, 1vw, 1rem);
    --space-md: clamp(1rem, 3vw, 2rem);
    --space-lg: clamp(2rem, 5vw, 4rem);
    --space-xl: clamp(3rem, 8vw, 6rem);
}

section {
    padding: var(--space-lg) var(--space-md);
}

h2 {
    margin-bottom: var(--space-md);
}

Bilder responsive machen

/* Grundregel: Bilder nie groesser als ihr Container */
img {
    max-width: 100%;
    height: auto;
}

/* Bild als Hintergrundbild */
.hero {
    background-image: url('hero.jpg');
    background-size: cover;
    background-position: center;
}

/* Object-fit fuer img-Tags */
.card img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Bild fuellt den Bereich, ohne verzerrt zu werden */
}

Responsive Tabellen

Tabellen sind auf kleinen Bildschirmen problematisch:

/* Loesung: Horizontal scrollbar machen */
.table-wrapper {
    overflow-x: auto;
}

.table-wrapper table {
    min-width: 600px;
}

Ein vollstaendiges responsives Beispiel

/* Reset und Grundeinstellungen */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    line-height: 1.6;
    color: #333;
}

/* Fluid Container */
.container {
    width: min(90%, 1200px);
    margin: 0 auto;
}

/* Responsive Grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
}

/* Responsive Bilder */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive Typografie */
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }

Uebungen

Uebung 1: Fluid Typografie

Erstelle eine Seite mit Ueberschriften und Absaetzen, die clamp() fuer die Schriftgroesse verwenden. Verkleinere den Browser und beobachte die stufenlose Anpassung.

Uebung 2: Responsive Cards

Erstelle ein Card-Grid, das sich automatisch anpasst — ohne Media Queries. Verwende auto-fit und minmax().

Uebung 3: Viewport-Einheiten

Erstelle eine Hero-Sektion mit:

min-height: 100dvh
Fluid Typografie mit clamp()
Fluid Padding mit clamp()

Was kommt als Naechstes?

Im naechsten Kapitel lernst du Media Queries — fuer gezielte Anpassungen bei bestimmten Bildschirmgroessen:

Breakpoints definieren
Verschiedene Layouts fuer verschiedene Geraete
Container Queries

Zusammenfassung

Responsive Design passt Layouts an alle Bildschirmgroessen an
Der Viewport Meta-Tag ist Pflicht fuer jede responsive Seite
Verwende relative Einheiten (%, rem, vw) statt fester Pixel
clamp() erstellt stufenlos responsive Werte
auto-fit mit minmax() macht Grids automatisch responsive
max-width: 100% auf Bildern verhindert Ueberlaeufe
Fluid Layouts brauchen oft keine Media Queries

Pro-Tipp: Teste dein responsives Design nicht nur durch Verkleinern des Browserfensters! Nutze die Device-Emulation in den Browser-DevTools (F12 -> Toggle Device Toolbar). Dort kannst du verschiedene Geraete simulieren und auch Touch-Events testen.