CSS Media Queries: @media mit min-width und max-width – responsive Layouts nach Breite, Auflösung und Eingabe

Von Medientypen zu Media Queries

Die @media-Regel aus CSS 2.1 unterscheidet Medientypen. @media print gilt beim Drucken, @media screen am Bildschirm. Media Queries hängen an den Typ eine oder mehrere Bedingungen in Klammern: @media screen and (min-width: 40em). Der Typ kann entfallen; @media (min-width: 40em) gilt für alle Medien. Der Medientyp handheld aus CSS 2.1 wird von Mobilbrowsern nicht mehr ausgewertet – sie melden sich als screen und werden über die Breite unterschieden.

min-width und max-width: Breakpoints

(min-width: 40em) trifft zu, sobald das Fenster mindestens 40em breit ist; (max-width: 39.99em) darunter. Die verbreitete Reihenfolge ist „mobile first“: Die Regeln ohne Media Query gelten für schmale Fenster, jede Media Query mit min-width ergänzt sie für breitere. Breakpoints in em statt px folgen der Schriftgröße des Nutzers – wer die Schrift vergrößert, bekommt das schmalere Layout, das zum größeren Text passt.

.seite { display: grid; grid-template-columns: 1fr; }
@media (min-width: 48em) {
  .seite { grid-template-columns: 16em 1fr; }
}

Media Queries Level 4 erlaubt die Bereichsschreibweise: @media (width >= 48em) und @media (30em <= width < 48em).

Weitere Bedingungen: Ausrichtung, Dichte, Eingabe, Farbschema

(orientation: landscape) unterscheidet Quer- und Hochformat. (min-resolution: 2dppx) trifft auf hochauflösende Bildschirme. (hover: hover) und (pointer: fine) sagen, ob ein Zeigegerät schweben kann und wie genau es ist – eine Schaltfläche darf auf Touch größer sein. (prefers-color-scheme: dark) liefert die Systemeinstellung für ein dunkles Schema, (prefers-reduced-motion: reduce) den Wunsch nach weniger Bewegung. Zusammen mit Custom Properties genügt für ein dunkles Schema eine Media Query, die die Variablen tauscht.

Media Queries im link-Element und in @import

Dieselben Bedingungen gelten im media-Attribut von link und hinter @import: <link rel="stylesheet" href="breit.css" media="(min-width: 48em)">. Der Browser lädt die Datei trotzdem, aber mit niedriger Priorität und ohne das Rendern zu blockieren. Wie Stylesheets eingebunden werden, erklärt CSS einbinden.

Woher die Breite kommt, gegen die geprüft wird

Die Breite in einer Media Query ist die des Anzeigebereichs, und zwar einschließlich eines dauerhaft sichtbaren Rollbalkens. Auf Systemen, die Rollbalken über den Inhalt legen, ist sie also gleich der sichtbaren Breite, auf anderen um einige Pixel größer. Wer eine Umschaltstelle exakt auf eine Elementbreite legt, sieht deshalb je nach Betriebssystem ein anderes Ergebnis – ein Grund mehr, keine Umschaltstelle auf einen Pixel genau zu setzen.

Auf Mobilgeräten kommt eine zweite Ebene hinzu. Ohne die entsprechende Angabe im Kopf des Dokuments tut ein Mobilbrowser so, als sei sein Anzeigebereich rund tausend Pixel breit, und verkleinert die fertige Seite anschließend. Alle Umschaltstellen für schmale Bildschirme greifen dann nie. Diese eine Zeile im Dokument ist damit die Voraussetzung dafür, dass Media Queries auf dem Telefon überhaupt das tun, was sie sollen – sie gehört zu ihnen, auch wenn sie nicht im Stylesheet steht.

Umschaltstellen aus dem Inhalt ableiten

Die verbreitete Praxis, Umschaltstellen nach Gerätetypen zu benennen, hat sich überlebt: Es gibt keine Breite mehr, bei der das Telefon aufhört und das Tablet anfängt, und ein Fenster auf dem Schreibtisch ist beliebig breit. Der tragfähigere Weg führt über den Inhalt – man verkleinert das Fenster, bis eine Anordnung unangenehm wird, und setzt die Umschaltstelle genau dort. Das ergibt ungerade Werte und meist deutlich weniger Stellen als erwartet.

Ebenso gebräuchlich ist die Regel, von der schmalen Ansicht auszugehen und mit einer Mindestbreite nach oben zu erweitern. Die Grundgestaltung steht dann ohne Bedingung im Stylesheet und gilt überall, auch dort, wo Media Queries nicht ausgewertet werden; jede Bedingung fügt hinzu, statt zurückzunehmen. Weil alle zutreffenden Bedingungen gelten und nicht nur die erste, entscheidet bei gleicher Spezifität die Reihenfolge im Stylesheet – Regeln für breitere Fenster gehören deshalb hinter die für schmalere.

Was nicht in eine Media Query gehört

Nicht jede Anpassung an eine schmale Ansicht braucht eine Bedingung. Ein Raster, das mit auto-fit und einer Mindestbreite arbeitet, bricht von selbst um; eine Breite, die aus einem Höchstwert und einem Anteil zusammengesetzt ist, passt sich ohne jede Umschaltstelle an; eine Schriftgröße mit einer eingeklammerten Spanne wächst stufenlos mit dem Anzeigebereich.

Der Unterschied zeigt sich zwischen zwei Umschaltstellen: Eine Bedingung springt, eine Berechnung gleitet. Für einen Wechsel der Anordnung ist der Sprung richtig, für Maße und Größen fast nie. Ein Stylesheet, das mit drei Bedingungen auskommt, weil alles Übrige rechnet, ist deutlich leichter zu pflegen als eines mit zwölf – und es sieht auch bei den Breiten gut aus, an die beim Entwurf niemand gedacht hat.

Container Queries: Bedingungen am Element statt am Fenster

Media Queries fragen das Fenster. Container Queries (@container) fragen die Größe eines Elternelements: Eine Komponente kann in einer schmalen Seitenleiste anders aussehen als in der breiten Hauptspalte, ohne die Fensterbreite zu kennen. Sie sind seit 2023 in allen verbreiteten Browsern verfügbar und ergänzen Media Queries dort, wo Bausteine an mehreren Stellen eingesetzt werden.

Häufige Fragen