Media Queries sind CSS-Regeln, die einen Block von Gestaltungsanweisungen an eine Bedingung knüpfen und ihn nur anwenden, wenn diese Bedingung zutrifft. Die häufigste Bedingung ist eine Mindest- oder Höchstbreite des Viewports. Die Breite, ab der eine Media Query greift, heißt Breakpoint. Abgefragt wird dabei immer der Viewport, während Container Queries dieselbe Art Frage an das umgebende Element stellen.
- Media Queries
CSS-Regel, die Gestaltungsanweisungen nur dann anwendet, wenn der Browser bestimmte Bedingungen wie eine Mindestbreite erfüllt.
Beispiel: „Die zweite Spalte erscheint erst in der Media Query ab 900 Pixeln.“Auch: Medienabfrage. Der Singular Media Query meint die einzelne Abfrage, der Plural wird im Alltag auch für die Technik insgesamt benutzt.
Gegenbegriff: Container Queries prüfen die Breite des umgebenden Elements. Damit richtet sich eine Kachel nach der Spalte, in der sie steht, auch wenn das Fenster viel breiter ist. Sie gelten seit August 2025 in allen großen Browsern als breit verfügbar.
So liest du eine Media Query
Eine Media Query beginnt mit @media, dahinter steht die Bedingung in runden Klammern und darauf der Regelblock in geschweiften Klammern. Der Browser wertet die Bedingung bei jeder Änderung des Viewports neu aus und schaltet die Regeln an oder ab.
/* Ab 768 Pixeln Viewport-Breite bekommt das Kartenraster zwei Spalten */
@media (min-width: 768px) {
.karten {
grid-template-columns: 1fr 1fr;
}
}Alles außerhalb des Blocks gilt unverändert weiter. Eine Media Query ergänzt also nur einzelne Eigenschaften und überschreibt sie.
min-width und max-width beschreiben zwei Richtungen
min-width bedeutet „ab dieser Breite“ und setzt auf einem schmalen Grundlayout auf, wie es Mobile-First vorsieht. max-width bedeutet „bis zu dieser Breite“ und geht vom breiten Layout aus, also vom Desktop-First-Ansatz. Wer beide Richtungen im selben Projekt mischt, bekommt Regeln, die sich an den Rändern überschneiden und gegenseitig aufheben. Wir arbeiten durchgehend mit min-width.
Die Breite ist nur eines von vielen Merkmalen
Media Queries können deutlich mehr abfragen. prefers-color-scheme meldet, ob im Betriebssystem der dunkle Modus aktiv ist, und steht seit 2022 in allen großen Browsern bereit. prefers-reduced-motion signalisiert, dass jemand Bewegung im Interface zurückgefahren haben möchte. Mit orientation prüfst du Hoch- oder Querformat, mit einer print-Abfrage baust du ein eigenes Layout für den Ausdruck, und pointer verrät, ob mit Maus oder Finger bedient wird.