Responsive Design
Eine Seite muss vom 320px-Handy bis zum breiten Monitor funktionieren. Responsive Design heißt: das Layout reagiert auf die verfügbare Breite — mit flexiblen Einheiten und Media Queries, die ab einer Breite andere Regeln anschalten.
Die eine Zeile, die alles entscheidet: Ohne den Viewport-meta-Tag im <head> zoomt das Handy die Desktop-Seite einfach winzig heraus — Media Queries greifen dann gar nicht.
HTMLmuss in jeden <head>
<meta name="viewport"
content="width=device-width, initial-scale=1">Simulierter Viewport
Zieh die Breite. Der Regler simuliert die Viewport-Breite — bei jedem Breakpoint schaltet das Raster auf mehr Spalten um (mobile-first: von wenig zu viel).
aktiv: Basis (kein Breakpoint) → 1 Spalte
CSSgenau diese Breakpoints
/* mobile-first: Basis gilt für alle, dann nach oben erweitern */
.galerie { grid-template-columns: 1fr; }
@media (min-width: 600px) {
.galerie { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.galerie { grid-template-columns: repeat(3, 1fr); }
}Die Einheiten, auf die es ankommt
- px
- Absolut. Gut für feine Details (border: 1px), schlecht für Layout-Größen, die mitwachsen sollen.
- rem
- Vielfaches der Wurzel-Schriftgröße (Default 16px). 1.5rem = 24px. Der Standard für Schrift & Abstände — skaliert mit den Nutzereinstellungen.
- em
- Relativ zur Schriftgröße des Elements selbst. Praktisch für Innenabstände, die zur Textgröße passen.
- %
- Anteil des Eltern-Elements. width: 50% = halbe Elternbreite.
- vw / vh
- Prozent der Viewport-Breite/-Höhe. 100vh = volle Bildschirmhöhe.
Warum eigentlich? — Warum mobile-first (min-width statt max-width)?
Du schreibst die einfachste Variante — eine Spalte fürs Handy — als Basis, ganz ohne Media Query. Dann fügst du hinzu, was größere Schirme zusätzlich können (min-width). Das ergibt weniger und einfacheren Code, lädt auf schwachen Geräten am wenigsten und zwingt dich, Prioritäten zu setzen: Was ist der Kern, was ist Luxus? Der umgekehrte Weg (Desktop zuerst, dann mit max-width wieder wegnehmen) endet meist in Sonderfall-Wust.
Häufiger Denkfehler — Feste px-Breiten für Layout-Container
width: 960px auf einem Container sieht auf dem Desktop gut aus und sprengt auf dem Handy den Bildschirm (horizontales Scrollen!). Nutz max-width statt width: max-width: 960px; width: 100% heißt „höchstens 960, aber schrumpf mit". Feste px-Breiten auf Layout-Boxen sind eine der häufigsten Ursachen für kaputte Mobil-Ansichten — auch in KI-Code.
Tiefer rein — clamp() — responsive ohne Media Query
Manchmal willst du gar keine harten Stufen, sondern weiches Mitwachsen. clamp(min, ideal, max) macht das:Dieselbe Idee funktioniert für Abstände und Breiten — „fluid typography / spacing". Spart Dutzende Breakpoints.
CSS
h1 {
/* nie kleiner als 1.5rem, nie größer als 3rem,
dazwischen wächst sie mit der Viewport-Breite */
font-size: clamp(1.5rem, 5vw, 3rem);
}