Eine CSS media query ist das grundlegendste responsive Werkzeug überhaupt: Sie lässt dein Design je nach Bildschirmgröße, Ausrichtung oder Nutzervorlieben unterschiedliche Stile anwenden. Eine Tabelle, die auf dem Handy überläuft, ein Button, der auf dem Desktop riesig wirkt, ein Abschnitt, der eine horizontale Scrollleiste auslöst — fast all das kommt von fehlenden oder schlecht geplanten Breakpoints. In diesem Leitfaden gehe ich den Aufbau einer Mobile-first-Breakpoint-Strategie von Grund auf durch, die häufigsten Fehler und die modernen Alternativen, mit praktischen Beispielen.
Wie funktioniert eine media query?
Eine media query kombiniert einen Medientyp (meist screen) mit einer oder mehreren Bedingungen. Ist die Bedingung wahr, gelten die enthaltenen Regeln; andernfalls werden sie übersprungen. Die häufigsten Bedingungen sind min-width und max-width.
/* Gilt auf Bildschirmen ab 600px Breite */
@media (min-width: 600px) {
.karte {
display: grid;
grid-template-columns: 1fr 1fr;
}
}Das entscheidende Detail: min-width: 600px bedeutet „wenn die Breite 600px oder mehr beträgt“. max-width: 600px bedeutet „wenn die Breite 600px oder weniger beträgt“. Diese beiden zu verwechseln ist die häufigste Ursache responsiver Fehler.
Warum Mobile-first gewinnt
Es gibt zwei Strategien: Regeln vom kleinen zum großen Bildschirm hinzufügen (Mobile-first, mit min-width) oder Regeln vom großen zum kleinen überschreiben (Desktop-first, mit max-width). Es gibt konkrete Gründe, Mobile-first vorzuziehen:
- Der Standardstil ist der einfachste: Du schreibst die Basisstile als eine Spalte und fügst Komplexität erst hinzu, wenn der Bildschirm wächst.
- Weniger Overrides: Beginnst du mit
max-width, musst du ständig Desktop-Stile rückgängig machen, was dein CSS fragil macht. - Performance: Ein mobiles Gerät muss keine Desktop-Regeln auswerten, die es nichts angehen.
In der Praxis: Schreibe deinen Basisstil ganz ohne media query und füge dann min-width-Blöcke für größere Bildschirme hinzu:
/* Mobil: Standard, eine Spalte */
.raster { display: grid; gap: 16px; }
/* Tablet und größer */
@media (min-width: 768px) {
.raster { grid-template-columns: repeat(2, 1fr); }
}
/* Desktop */
@media (min-width: 1024px) {
.raster { grid-template-columns: repeat(3, 1fr); }
}Wohin gehören die Breakpoints?
Ein verbreiteter Irrtum ist, Breakpoints nach den Pixelbreiten beliebter Geräte (iPhone, iPad und so weiter) festzulegen. Gerätemodelle ändern sich ständig; der „Standard“ von heute ist morgen überholt. Der richtige Ansatz ist, einen Breakpoint dort zu setzen, wo der Inhalt bricht. Verbreitere dein Design langsam; werden Zeilen zu lang zum bequemen Lesen oder quetscht sich eine Karte unschön zusammen, setze dort einen Breakpoint.
Ein Ausgangspunkt hilft dennoch. In den meisten Projekten genügen diese drei oder vier Bereiche:
- ~480–600px: Übergang großes Handy / kleines Tablet
- ~768px: Tablet, vom gestapelten Layout zu mehreren Spalten
- ~1024px: kleiner Desktop / Tablet im Querformat
- ~1280px+: breiter Desktop, Begrenzung der Inhaltsbreite
Behandle diese Werte nicht als heilig; verschiebe sie passend zum echten Inhalt deines Projekts.
px, em, rem: die richtige Einheit wählen
em statt px in den Bedingungen einer media query zu verwenden hat einen Vorteil: Vergrößert ein Nutzer die Schriftgröße des Browsers, skalieren die Breakpoints mit, was die Barrierefreiheit verbessert. Ein em innerhalb einer media query wird relativ zur Root-Schriftgröße (meist 16px) berechnet, also 37.5em ≈ 600px.
@media (min-width: 48em) { /* ~768px */
.seitenleiste { position: sticky; top: 0; }
}Die allgemeine Regel: em ist eine konsistente Wahl für Layout-Breakpoints, aber px ist ebenso völlig gültig. Lege im Team einen Standard fest und bleibe dabei.
Media queries jenseits der Breite
Media queries betreffen nicht nur die Breite. Einige mächtige Anwendungen:
- Ausrichtung:
@media (orientation: landscape)für ein Layout speziell im Querformat. - Dunkelmodus:
@media (prefers-color-scheme: dark), um sich dem Systemthema anzupassen. - Reduzierte Bewegung:
@media (prefers-reduced-motion: reduce), um Animationen abzuschalten; das ist eine Anforderung der Barrierefreiheit. - Zeigertyp:
@media (hover: hover), um Hover-Effekte nur auf Geräten mit Maus zu geben.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition: none !important; }
}Die moderne Alternative: Container Queries
Media queries betrachten stets den Viewport. Doch oft willst du, dass sich eine Komponente an die Breite ihres eigenen Containers anpasst. Hier kommen @container-Abfragen ins Spiel, und sie werden inzwischen in allen aktuellen Browsern unterstützt.
.liste { container-type: inline-size; }
@container (min-width: 400px) {
.karte { display: flex; gap: 12px; }
}So kann dieselbe Karten-Komponente in einer schmalen Seitenleiste vertikal stapeln und in einem breiten Hauptbereich nebeneinander stehen — ohne globale Breakpoints anzufassen. Container Queries ersetzen media queries nicht, sie ergänzen sie: media queries für das Seitenlayout, Container Queries für wiederverwendbare Komponenten ist eine gute Arbeitsteilung.
Unverzichtbar: das Viewport-Meta-Tag
Damit all deine media queries auf dem Handy korrekt funktionieren, muss die Seite diese Zeile in ihrem <head> enthalten. Ohne sie rendert ein Handy die Seite in Desktop-Breite und verkleinert sie, und deine Breakpoints greifen nicht:
<meta name="viewport" content="width=device-width, initial-scale=1">Häufige Fragen
Sollte ich min-width oder max-width verwenden?
Arbeitest du Mobile-first, setze auf min-width: Der Basisstil ist mobil und du baust aus, während der Bildschirm wächst. Bleib bei einer Strategie; beide planlos zu mischen führt zu widersprüchlichen Regeln und schwer zu debuggendem CSS.
Wie viele Breakpoints sollte ich verwenden?
Es gibt keine feste Zahl. Die meisten Seiten funktionieren mit drei oder vier bestens. Setze sie dort, wo der Inhalt bricht, nicht nach Gerätemodell. Ein unnötiger Breakpoint erschwert nur die Wartung.
Werden Container Queries media queries ersetzen?
Nein, beide werden zusammen verwendet. Media queries sind sinnvoll für das gesamte Seitenlayout und globale Schwellenwerte, während Container Queries zu Komponenten passen, die sich an ihren Kontext anpassen.
Brauchst du eine responsive Oberfläche? Ich baue Seiten, die auf jedem Bildschirm makellos aussehen, mit einer Mobile-first-, sauberen und wartbaren CSS-Architektur. Um über dein Projekt zu sprechen, nimm Kontakt mit mir auf.