Responsive Design und Media Queries
2026 schaut über die Hälfte aller Internet-Nutzer Webseiten vom Smartphone an. Wenn deine Seite nur auf Desktop funktioniert, hast du die Hälfte aller User verloren. Responsive Design ist die Technik mit der eine Webseite auf jeder Bildschirmgröße – Smartphone, Tablet, Laptop, 4K-Monitor – funktioniert. Ohne separate Mobile-Version, ohne App.
Drei Säulen tragen Responsive Design: flexible Layouts (mit Flexbox und Grid), flexible Bilder (skalieren mit dem Container), und Media Queries (anderer Stil bei anderer Breite). In dieser Lektion bringst du alles zusammen.
1) Der Viewport: das Fenster ins Web
Der Viewport ist der sichtbare Browser-Bereich. Auf Mobile ist er nur ein paar hundert Pixel breit, auf Desktop oft 1920+. Ohne Maßnahmen würde dein Browser auf einem iPhone versuchen die Seite mit 980px-Standard-Breite anzuzeigen und die ganze Seite klein rauszoomen. Damit das nicht passiert, gehört in den <head> jeder Seite die Viewport-Meta-Tag (siehe L2):
Das sagt dem Browser: „Nutze die echte Gerätebreite als CSS-Breite und zoome anfangs auf 100%." Klingt banal, ist aber fundamental – ohne diese Zeile sehen Smartphones jede moderne Seite kaputt. Wenn du eine Seite startest, gehört dieser Tag immer in das Skelett.
2) Media Queries: anderer Stil bei anderer Breite
Eine Media Query sagt: „wenn diese Bedingung erfüllt ist, gelten folgende CSS-Regeln." Die häufigste Bedingung: die Browser-Breite. Damit kannst du z.B. einen 3-spaltigen Layout auf Desktop und einen 1-spaltigen auf Mobile haben – mit demselben HTML:
.container {
display: grid;
grid-template-columns: 1fr; /* Mobile: eine Spalte */
}
/* Ab 768px Breite: zwei Spalten */
@media (min-width: 768px) {
.container { grid-template-columns: 1fr 1fr; }
}
/* Ab 1024px: drei Spalten */
@media (min-width: 1024px) {
.container { grid-template-columns: 1fr 1fr 1fr; }
}
Wichtig: die Bedingung wird live geprüft. Resize das Browserfenster, und die Stile springen sofort um. Probier es selbst aus mit der nächsten Demo:
3) Viewport-Simulator: Live-Resize
Ändere die Breite mit dem Slider oder per Preset-Button. Beobachte wie sich das Layout anpasst – die Media Query unten zeigt welche Regel gerade aktiv ist:
Hauptinhalt der Seite.
4) Typische Breakpoints
An welchen Breiten setzt man die Umbrüche? Es gibt keine „offizielle" Antwort – die Geräte sind zu vielfältig. Aber diese Werte haben sich in der Praxis bewährt und werden von vielen Frameworks (Bootstrap, Tailwind) verwendet:
auto-fit brauchst du oft GAR keine Media Queries mehr (siehe L9).5) Mobile-First vs. Desktop-First
Zwei Strategien wie du Media Queries schreibst – beide funktionieren, aber Mobile-First gewinnt in der Praxis:
.grid { grid-template-columns: 1fr; }
/* Aufwärts mit min-width */
@media (min-width: 768px) {
.grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
.grid { grid-template-columns: 1fr 1fr 1fr; }
}
.grid { grid-template-columns: 1fr 1fr 1fr; }
/* Abwärts mit max-width */
@media (max-width: 1023px) {
.grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
.grid { grid-template-columns: 1fr; }
}
min-width für größere Bildschirme Komplexität hinzu. Vorteile: einfaches Mobile-CSS lädt zuerst, ältere Browser ohne Media-Query-Support bekommen das mobile Layout (besser als kaputtes Desktop-Layout), weniger „verschachteltes Denken". Heute Standard.6) Flexible Einheiten – kein fixes px mehr
Für Responsive Design verwende möglichst keine festen Pixel. Stattdessen relative Einheiten, die sich an Browser-Einstellungen und Container-Größe anpassen:
min-height: 100vh = volle Bildschirmhöhe.max-width: 60ch = gut lesbare Zeilenlänge.html { font-size: 16px; }, dann alle anderen Größen in rem – ein h1 { font-size: 2rem } ist 32px. Stellt der User in seinem Browser die Schrift auf 150%, werden alle rem-Werte automatisch größer. Wichtig für Barrierefreiheit. Auch clamp(min, ideal, max) ist mächtig: font-size: clamp(1rem, 2vw, 1.5rem) = Schrift skaliert mit dem Viewport, aber nicht kleiner als 1rem und nicht größer als 1.5rem.7) Bilder responsive machen
Ein Bild ist standardmäßig so groß wie seine Ursprungs-Pixel. Auf Mobile schießen die oft über den Container hinaus. Die einfachste Lösung in CSS:
max-width: 100%;
height: auto;
}
Das genügt für die meisten Fälle. Bilder werden nie breiter als ihr Container, und Höhe passt sich proportional an. Für Profis gibt es weiter das srcset-Attribut: damit lädt der Browser je nach Bildschirmauflösung die passend große Variante – kein 4MP-Foto mehr für Smartphone-User. Mehr in L4 Bilder.
8) Mobile-Gotchas: das vergessen Anfänger oft
Drei häufige Probleme die du beim Mobile-Test sehen wirst:
- Tap-Targets zu klein: Buttons und Links unter 44×44px sind auf Touch-Geräten kaum zu treffen.
padding: 12px 16pxminimum für Klick-Elemente. - Hover existiert nicht: auf Touch gibt's kein
:hover. Funktionalität niemals nur per Hover zugänglich machen – immer auch per Tap erreichbar. - Querformat vergessen: Smartphone gedreht hat plötzlich Querformat. Dein Layout sollte auch dann funktionieren. Test in beiden Ausrichtungen.
- Lange Wörter brechen aus: URLs, lange E-Mails. Mit
word-wrap: break-wordoderoverflow-wrap: anywhereabfangen. - Schrift zu klein: auf Mobile mindestens 16px Body-Schrift. Kleiner führt zu Auto-Zoom in iOS-Safari, was den Viewport durcheinanderbringt.
9) Weitere Media-Features
Media Queries können mehr als nur Breite checken. Einige nützliche Bedingungen:
@media (orientation: landscape) { ... }
/* Dark Mode */
@media (prefers-color-scheme: dark) { ... }
/* User will weniger Animationen */
@media (prefers-reduced-motion: reduce) { ... }
/* Drucken */
@media print { ... }
/* Maus oder Touch? */
@media (hover: hover) { ... }
prefers-color-scheme ist mächtig für Dark Mode: damit kannst du Stile abhängig vom System-Setting des Users anpassen. prefers-reduced-motion respektiert die Barrierefreiheits-Einstellung von Nutzern die durch Animationen Übelkeit oder Schwindel bekommen. Diese beiden gehören heute zu jedem ernsthaften Webprojekt dazu.
10) Testen, testen, testen
Drei Wege deine Seite auf verschiedenen Größen zu testen:
- Browser-Fenster verkleinern: der schnellste Test. Zieh die Browser-Ecke nach links, beobachte was passiert. Reicht für die meisten Fälle.
- DevTools Responsive Mode: F12 → Toggle-Device-Toolbar (Strg+Shift+M). Vordefinierte Geräte (iPhone 14, Pixel 7 usw.) auswählen oder Custom-Breite. Zeigt auch wie Touch-Events sich verhalten würden.
- Echte Geräte: wenn möglich, teste auf realer Hardware. Emulatoren sind gut, aber die Realität hat manchmal Überraschungen – andere Browser-Versionen, andere Schriftgrößen, andere Touch-Verhaltensweisen.
Beim Bauen einer neuen Seite empfehle ich: arbeite die ganze Zeit mit dem DevTools-Responsive-Mode bei ~375px Breite (iPhone-Standard). Dann ist Mobile-First nicht nur Theorie, sondern gelebte Praxis. Erweitere am Ende auf größere Breiten.
11) Frameworks: Bootstrap, Tailwind und Co.
Viele Profis nutzen heute CSS-Frameworks die Responsive Design eingebaut haben:
- Bootstrap – das Klassiker-Framework mit fertigen Komponenten und einem 12-Spalten-Grid.
- Tailwind CSS – modernes „utility-first"-Framework mit Klassen wie
md:grid-cols-2 lg:grid-cols-3direkt im HTML. - Bulma, Foundation, Pico.css – schlankere Alternativen.
Frameworks sparen Zeit, aber: lerne erst CSS pur. Wer mit Tailwind anfängt ohne CSS-Grundlagen, hat später Schwierigkeiten wenn etwas Custom-Behavior nötig ist. Frameworks sind Werkzeuge auf der Basis – kein Ersatz für das Fundament.
Zusammenfassung
Responsive Design = Webseite funktioniert auf jeder Bildschirmgröße. Pflicht: <meta name="viewport" content="width=device-width, initial-scale=1"> im head. Media Queries mit @media (min-width: 768px) { ... } für unterschiedliche Stile pro Breite. Mobile-First (Basis = Mobile, mit min-width nach oben) ist heute Standard. Häufige Breakpoints: ~640, 1024, 1440px – aber lieber nach Content als nach Geräten. Relative Einheiten verwenden: rem für Größen, % für Container, vw/vh für Viewport, clamp() für skalierbare Werte. Bilder: img { max-width: 100%; height: auto; }. Mobile-Gotchas: 44px Tap-Targets, kein nur-Hover, 16px Mindestschrift. Weitere Media-Features: prefers-color-scheme, prefers-reduced-motion, orientation, print. Testen via DevTools Responsive-Mode.