Responsives Design mit CSS
Flex Responsive und Grid Responsive zeigten Layout-Tricks an Breakpoints. Responsives Design ist das große Bild: eine Site, die auf Phone, Tablet und breitem Monitor lesbar bleibt — ohne zwei HTML-Kopien. Diese Lektion legt Gewohnheiten; Media Queries, Breakpoints und responsive Bilder vertiefen später.
Werkzeugkiste Responsives Design
📊 Responsives Design auf einen Blick
| Baustein | Alltagsaufgabe |
|---|---|
| Viewport-Meta | Mobile Browser nutzen Gerätebreite, keine fake Desktop-Spalte |
| Fluider Container | width: 100% + max-width + Seitenpadding — lesbare Zeilenlänge |
Relative Einheiten (rem, %, em) |
Typo und Abstände skalieren mit Einstellungen |
| Flexible Bilder | max-width: 100%, damit Medien nicht überlaufen |
| Ein HTML-Baum | Gleiche Landmarks; CSS trägt Layout-Wechsel |
| Media Queries (nächste Lektion) | Regeln nur bei passendem Viewport |
Fixe Pixelbreiten, die auf dem Phone zoomen oder horizontal scrollen, nerven. Responsives Design akzeptiert jede Breite und passt Abstand, Spalten und Schrift ruhig an — mit Flex- und Grid-Mustern, die Sie schon üben.
Viewport-Meta — Mobile brauchen den Hinweis
Ohne <meta name="viewport" content="width=device-width, initial-scale=1"> rendern viele Phones eine Desktop-Breite und schrumpfen sie. Einmal im <head>, dann CSS.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
Mobile-first vs Desktop-first
Mobile-first schreibt Basis für schmale Screens, dann min-width-Queries für größer. Desktop-first startet breit und nutzt max-width — wie in Flex/Grid Responsive. Beides OK, wenn Sie eine Schicht pro Schritt ändern; eine Gewohnheit pro Projekt.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
font-size: 1rem;
padding: 1rem;
}
/* Media-Queries-Lektion fügt min-width-Regeln hier ein */
Fluider zentrierter Container
Volle Breite mit max-width-Deckel und horizontalem Padding — Inhalt berührt keine Kante. Funktioniert vor Flex/Grid-Spalten.
.page-wrap {
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Relative Einheiten für Typo und Abstand
rem hängt an der Root-Schrift — gut für Überschriften und Gaps. % für Breiten im Elternelement. Nicht alles in px festnageln.
:root {
font-size: 100%;
}
h1 {
font-size: 1.75rem;
margin: 0 0 0.75rem;
}
.lead {
font-size: 1.125rem;
max-width: 40rem;
}
Flexible Bilder und Medien
Breitere Bitmaps erzeugen Horizontal-Scroll. Einfacher Schutz: display: block, max-width: 100%, height: auto.
img,
video {
display: block;
max-width: 100%;
height: auto;
}
Ruhige responsive Gewohnheit
Ein HTML-Baum. Viewport-Meta gesetzt. Fluider Container und relative Einheiten zuerst. Flex/Grid Responsive, wenn Spalten reflowen müssen — kein zweites „nur Mobile“-Site. Breakpoint-Plan notieren; Media Queries erklärt die Syntax.
Selbst ausprobieren
- Viewport-Meta auf einer Beispielseite prüfen.
- Inhalt in fluiden Container mit
max-widthund Padding. - Fließtext in
remund Browser-Zoom testen. - Flexible-Bilder-Regel auf Galerie.
- Ein Layout, das noch eine Media Query braucht — für die nächste Lektion.
Typische Fehler
- Feste px auf jedem Wrapper
- Separate m.example.com statt responsive CSS auf einem Baum
- Viewport vergessen — Mobile wirkt „rausgezoomt“
- Riesige Bilder ohne
max-width: 100% - Diese Einführung ersetzt nicht Media Queries, Breakpoints und responsive Bilder
Zusammenfassung
- Responsives Design passt einen HTML-Baum an Viewport-Größen an
- Viewport-Meta + fluid Container + relative Einheiten = Fundament
- Mobile-first und Desktop-first sind Startpunkte; Media Queries wenden Shifts an
- Flex/Grid Responsive sind Werkzeuge in dieser Denkweise
- Als Nächstes: Media Queries
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt