Responsive Design: Eine Website, alle Bildschirme
Responsive Design heißt: Dieselbe Seite funktioniert auf dem Handy in der Bahn, am Laptop im Café und auf dem großen Monitor, ohne getrennte "mobile Version". Das ist keine einzelne Technik, sondern eine Strategie aus vier Zutaten die zusammenspielen.
Zutat 1: Der viewport-Tag
<meta name="viewport" content="width=device-width, initial-scale=1">Ohne diese Zeile im head ist alles andere umsonst: Das Handy rendert die Seite dann in Desktop-Breite und zoomt sie winzig heraus. Mit ihr entspricht die CSS-Breite der Gerätebreite, die Basis auf der alles Weitere aufbautt.
Zutat 2: Flexible Layouts statt fester Pixel
Feste Breiten brechen, flexible fließen. Die Werkzeuge dafür kennst du schon aus den letzten Kapiteln: Flexbox mit flex-wrap, Grid mit auto-fit und minmax(), Prozent- und fr-Einheiten, dazu max-width statt width für Inhaltsspalten. Wer so baut, braucht Media Queries nur noch für die Stellen an denen das Layout wirklich die Form wechseln soll.
Zutat 3: Anpassungsfähige Inhalte
Bilder bekommen ein pauschales max-width: 100%, damit sie nie aus ihrem Container laufen, und wo nötig verschiedene Varianten über picture und srcset. Breite Tabellen und Codeblöcke wandern in Container mit horizontalem Scrollen, so wie hier im Wiki, statt die ganze Seite aufzusprengen. Schriftgrößen in rem respektieren die Systemeinstellungen der Nutzr.
Zutat 4: Media Queries für die Formwechsel
An den Stellen wo Fließen nicht reicht, schalten Media Queries um: Spalten werden zu Stapeln, die Menüleiste wird zum Klappmenü, Schmuckelemente fliegen raus. Dieses Wiki ist ein hübsches Anschauungsobjekt: Auf dem Desktop ein Retro-Fenster mit Menüleiste wie 1998, auf dem Handy stapelt sich alles sauber untereinander. 1998 selbst hätte das nicht gekonnt, damals wurden Seiten stolz "optimiert für 800x600" ausgeliefert, nachzulesen im Retro-Web.
Testen, testen, testen
Der schnellste Test kostet nichts: Browserfenster langsam schmal ziehen und schauen wo es klemmt. Die Gerätesimulation in den Entwicklerwerkzeugen (F12) zeigt gängige Handygrößen, und ab und zu ein echtes Telefon in die Hand zu nehmen ersetzt trotzdem nichts. Typische Warnsignale: horizontales Scrollen der Gesamtseite, abgeschnittene Tabellen, Buttons die zu klein zum Antippn sind.
Weiter im Lernpfad: CSS-Variablen · Tutorial dazu: Responsive Webseite