Sieh, welche Media Queries gerade auf deinem Bildschirm greifen, aktualisiert beim Ändern der Fenstergröße. Range-Syntax, prefers-color-scheme, Reduced Motion, hover und pointer, Breakpoints und Container Queries.
Eine Media Query wendet CSS nur an, wenn eine Bedingung über das Gerät oder die Einstellungen des Nutzers zutrifft. @media (width >= 48rem) { ... } zielt auf breitere Bildschirme; prefers-color-scheme, prefers-reduced-motion, hover und pointer beschreiben Einstellungen und Eingabegeräte. Schreib zuerst die Styles für kleine Bildschirme und ergänze dann min-width-Queries für größere Layouts.
Die meistgenutzten Queries
Das Panel unten prüft sechzehn Queries über window.matchMedia in deinem eigenen Browser und aktualisiert sich, wenn du die Fenstergröße änderst, ein Handy drehst oder den Dark Mode umschaltest. Darunter: die Range-Syntax, Queries für Nutzereinstellungen, Queries für Eingabegeräte, Framework-Breakpoints und wann eine Container Query das bessere Werkzeug ist.
Eine kürzere Schreibweise für Breitenbedingungen mit Vergleichsoperatoren: (width >= 600px) statt (min-width: 600px) und (400px <= width < 900px) für einen Bereich. Sie wird in allen aktuellen großen Browsern unterstützt; Safari hat sie 2023 in Version 16.4 ergänzt, prüfe also caniuse, wenn du ältere Geräte unterstützt.
Mobile-First-Stylesheets nutzen min-width: Die Basis-Styles bedienen kleine Bildschirme, und jede Query ergänzt Layout für breitere. So bleibt das CSS für kleine Bildschirme einfach. max-width ist für kleine Ausnahmen in Ordnung, aber beides am selben Breakpoint zu mischen, kann eine Lücke oder Überlappung von einem Pixel hinterlassen; die Range-Syntax mit < und >= vermeidet das.
Nutze @media (prefers-color-scheme: dark) und definiere darin deine Farbvariablen neu. In JavaScript liefert window.matchMedia('(prefers-color-scheme: dark)').matches dieselbe Antwort, und sein change-Event feuert, wenn der Nutzer umschaltet.
Media Queries schauen auf den Viewport und das Gerät. Container Queries schauen auf die Größe eines Elternelements, das mit container-type markiert ist. Eine Karte, die ihr Layout ändern soll, wenn ihre Spalte schmal ist, egal wo sie platziert wird, braucht eine Container Query.
Häufige Ursachen: Das Viewport-Meta-Tag fehlt, sodass Handys vorgeben, etwa 980px breit zu sein; die Query steht oberhalb der Regel, die sie überschreiben soll, und verliert durch die Reihenfolge im Quelltext; oder es fehlt ein Leerzeichen oder eine Klammer, was die ganze Bedingung stillschweigend ungültig macht.
Werte aus der offiziellen Dokumentation von Tailwind CSS v4 und Bootstrap 5. Die Werte von Tailwind sind in rem angegeben und hier bei den standardmäßigen 16px dargestellt.
Standard-Breakpoints in zwei beliebten Frameworks (min-width, Mobile First)
Die Range-Syntax liest sich wie Mathematik und macht überschneidungsfreie Bereiche einfach: < auf der einen Seite, >= auf der anderen.
Kleine Ergänzungen, durch die sich eine Website auf jedem Gerät nativ anfühlt.
matchMedia gibt ein Objekt mit matches und einem change-Event zurück. Genau das nutzt das Live-Panel auf dieser Seite.
Die Wahl zwischen beiden
Beide Karten haben dasselbe Markup. Nur die breite hat Platz, um auf ein Zeilenlayout umzuschalten. Ändere die Breiten, um den Wechsel zu sehen.
Varianten in Tailwind v4 und das CSS, das sie erzeugen
Breite
Schmaler als Tailwind sm (640px bei Standardschriftgröße)
Breite
Zwischen Tailwind sm und lg
Breite
Ab Tailwind lg
Breite
Klassischer Tablet-Breakpoint, alte Syntax
Ausrichtung
Viewport höher als breit
Ausrichtung
Viewport breiter als hoch
Eingabe
Haupteingabe kann hovern (Maus, Trackpad)
Eingabe
Haupteingabe ist ungenau (Finger)
Eingabe
Haupteingabe ist präzise (Maus, Stift)
Eingabe
Mindestens eine Eingabe kann hovern
Einstellung
System auf Dark Mode eingestellt
Einstellung
Nutzer wünscht weniger Bewegung
Einstellung
Nutzer wünscht mehr Kontrast
Anzeige
Bildschirm mit hoher Pixeldichte, 2x oder mehr
Anzeige
Läuft als installierte Web-App
Anzeige
Drucken oder Druckvorschau
Treffer kopieren
Viewport: {size}. Ändere die Fenstergröße, dreh das Gerät oder wechsle dein System-Theme, und die Liste aktualisiert sich.
wird gemessen...
{w} x {h} CSS-px, Pixelverhältnis {r}x
Live-Ergebnisse der Media Queries
Gruppe
Query
Greift, wenn
Jetzt
Ja
Nein
n/a bedeutet, dass dieser Browser die Query nicht lesen konnte, was bei der Range-Syntax in älteren Versionen vorkommt. Brauchst du genaue Gerätegrößen? Probiere das
Tool zur Bildschirmauflösung
Kostenlos starten · Keine Kreditkarte nötig