Responsives Webdesign

Responsives Webdesign lässt eine HTML-Seite auf Änderungen des verfügbaren Platzes reagieren. Ein hochkant gehaltenes Smartphone, ein quer gedrehtes Tablet und ein Desktopfenster mit veränderter Größe sollten alle lesbaren Text, bedienbare Steuerelemente und passende Bilder zeigen. Du gestaltest für einen stufenlosen Bereich von Breiten, auch zwischen vertrauten Gerätegrößen.

Ethan Marcotte führte den Begriff 2010 für drei Techniken ein: fließende Layouts, flexible Bilder und Medienabfragen. Flexbox, Grid, Container-Abfragen und HTML für responsive Bilder erweitern diesen Werkzeugkasten heute. Jedes Werkzeug löst einen anderen Teil der Aufgabe; eine Seite braucht mehr als eine einzelne Einstellung.

Die richtigen Pixel zählen

Ein CSS-Pixel ist eine Layouteinheit und entspricht nicht unbedingt einem Bildpunkt auf dem Bildschirm. CSS definiert 96px als gleich 1in; auf einem Bildschirm garantiert dieses Verhältnis keinen gemessenen physischen Zoll. Ein Bildschirm mit hoher Pixeldichte verwendet mehrere Gerätepixel pro CSS-Pixel. Das Gerätepixelverhältnis beschreibt dieses Verhältnis.

Ein Smartphone mit 390 CSS-Pixeln Breite und einem Verhältnis von 3 ist 1170 Gerätepixel breit. Eine Breitenabfrage sieht weiterhin 390px. Die zusätzlichen Bildpunkte helfen, Text und Bilder scharf darzustellen; sie geben einem Layout nicht dreimal so viel Platz. Dieser Unterschied ist wichtig, wenn du später Bilddateien auswählst.

Der Viewport ist der Browserbereich, in dem die Seite angezeigt wird, ohne die Symbolleisten des Browsers. Wenn du die Fenstergröße änderst oder ein Gerät drehst, ändert sich der verfügbare Platz. Auf Smartphones kann auch das Ein- und Ausblenden der Symbolleisten die sichtbare Höhe ändern.

Mobilen Browsern die beabsichtigte Breite mitteilen

Mobile Browser können eine Seite ohne entsprechende Einstellung in einem breiten virtuellen Viewport von häufig etwa 980 CSS-Pixeln darstellen und sie dann auf Bildschirmgröße verkleinern. Auf einem 390px breiten Smartphone beträgt der Skalierungsfaktor etwa 0,4. Text mit der Angabe 16px wirkt dann etwa 6,4px hoch, und eine Abfrage für schmale Breiten trifft möglicherweise nie zu, weil der Layout-Viewport weiterhin breit ist.

Setze dies in das <head> des Dokuments:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width fordert die Gerätebreite in CSS-Pixeln an. initial-scale=1 beginnt mit normalem Zoom. Lade danach die Seite in einer Browseransicht in Smartphone-Größe neu und prüfe sowohl den Text als auch die aktiven Breitenabfragen.

Lass Zoom verfügbar. Füge weder user-scalable=no noch maximum-scale=1 hinzu. Menschen mit Sehbehinderung müssen Inhalte vergrößern können; Text muss eine Vergrößerung auf 200 % unterstützen, ohne dass Inhalte oder Funktionen verloren gehen. Einige mobile Browser ignorieren Zoom-Beschränkungen, aber die Seite sollte Zoom selbst unterstützen.

Auch das Layout prüfen

Das Viewport-Tag ändert keine Box mit fester Breite. Eine .page mit width: 960px ragt weiterhin über einen 390px breiten Viewport hinaus. Ersetze starre Breiten durch begrenzte fließende Breiten, mache Medien flexibel und ändere das Layout dort, wo der Inhalt es braucht.

Um die Ursache einer winzigen mobilen Seite zu finden, prüfe zuerst das <head> auf das Viewport-Tag. Bei einer normal großen Seite, die seitlich scrollt, untersuche die Boxen, die über die verfügbare Breite hinausragen. Diese Symptome weisen auf unterschiedliche Ursachen hin.

Wähle eine Einheit anhand der Frage, woran sich die Größe orientieren soll. Eine Spalte folgt meist ihrem umschließenden Block. Der Innenabstand einer Schaltfläche kann ihrem Text folgen. Die Zeilenlänge eines Absatzes folgt der Schriftart. Mit der richtigen Bezugsgröße greifen Änderungen ineinander.

Prozentangaben und das Boxmodell

Eine Box mit width: 50% ist in einem 600px breiten umschließenden Block 300px breit und in einem 360px breiten Block 180px. Prozentuale Innen- und Außenabstände, einschließlich der oberen und unteren Werte, beziehen sich bei normaler horizontaler Schreibrichtung ebenfalls auf die Breite des umschließenden Blocks. Somit ergibt padding-top: 10% in einem 600px breiten Elternelement 60px.

Bei der Höhe ist es anders. Eine prozentuale Höhe braucht eine festgelegte Bezugshöhe. Ergibt sich die Höhe eines gewöhnlichen Elternelements aus seinem Inhalt, verhält sich height: 50% im Allgemeinen wie auto. Lass Textboxen mit ihrem Inhalt wachsen, statt sie über prozentuale Höhen zu steuern.

Verwende einen fließenden Container mit einer Maximalbreite:

.page {
  box-sizing: border-box;
  width: 100%;
  max-width: 70rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

Auf einem schmalen Bildschirm füllt die Box die verfügbare Breite, wobei der Innenabstand innerhalb der Box liegt. Auf einem breiten Bildschirm wächst sie höchstens auf 70rem und die automatischen Außenabstände in Inline-Richtung zentrieren sie. Bei einer Schriftgröße des Wurzelelements von 16px beträgt ihre maximale äußere Breite 1120px. Bei border-box sind Innenabstand und Rahmen in der angegebenen Breite enthalten; bei content-box würden 100 % Breite plus Innenabstand überlaufen. Eine feste Angabe width: 70rem würde das Schrumpfen ebenfalls verhindern.

Ein 340px breites umschließendes Element mit border-box und jeweils 16px Innenabstand auf beiden Seiten hat zum Beispiel 308px für seinen Inhalt übrig, wenn kein Rahmen vorhanden ist. Die angegebene Breite beschreibt die Außenseite dieser Box. Änderst du dieselbe Deklaration zu content-box, ist allein der Inhalt 340px breit und die äußere Breite beträgt 372px. Wenn du diese unterschiedlichen Breiten in den Entwicklerwerkzeugen untersuchst, erkennst du Überläufe durch Innenabstände leichter.

Texteinstellungen weitergeben

Belasse die Schriftgröße des Wurzelelements beim Standardwert der Lesenden oder verwende einen Prozentwert wie 100%. Bei einer Schriftgröße des Wurzelelements von 16px sind 1.5rem gleich 24px; bei 20px sind es 30px. Ein festes html { font-size: 16px; } verhindert, dass sich diese bevorzugte Standardschriftgröße auf Größen überträgt, die sich am Wurzelelement orientieren.

Für font-size verwendet em die Schriftgröße des Elternelements. Verschachtelte Listen, für die jeweils 1.2em festgelegt ist, vervielfachen daher die Schriftgröße: Aus 16px werden 19,2px und dann 23,04px. Verwende rem, wenn alle Verschachtelungsebenen dieselbe Größe behalten sollen.

In anderen Eigenschaften verwendet em die eigene Schriftgröße des Elements. Eine Schaltfläche mit padding: 0.5em 1em erhält mehr Innenabstand, wenn ihr Text wächst. So bleibt der Abstand ohne eigenen Breakpoint proportional.

Für Absätze bietet max-width: 65ch eine sinnvolle Begrenzung der Zeilenlänge. Die Einheit misst die Breite der „0“ und zählt die Zeichen in einer Proportionalschrift daher nicht genau. Eine gängige Empfehlung für die Lesbarkeit sind etwa 45 bis 75 Zeichen pro Zeile; prüfe die tatsächliche Schriftart und den Text im Browser.

Viewport-Einheiten folgen dem Viewport des Browsers, selbst wenn ein Element innerhalb einer kleineren Box liegt. 1vw ist 1 % der Viewport-Breite; 1vh ist 1 % seiner Höhe. vmin verwendet das kleinere Maß und vmax das größere. In einem 800px breiten Viewport sind 50vw gleich 400px. In einem 300px hohen Viewport sind 70vh gleich 210px.

Diese Bezugsgröße ist wichtig. Eine Seitenleiste kann in einem 1400px breiten Fenster nur 260px breit sein. Ein Kindelement mit width: 50vw fordert 700px an und passt daher nicht in diese Seitenleiste. Verwende eine Prozentangabe, wenn das Kindelement seinem Elternelement folgen soll. Für einen gewöhnlichen Block über die volle Breite ist width: 100% vorzuziehen: 100vw kann die Breite einer Desktop-Bildlaufleiste einschließen und seitliches Scrollen verursachen.

Die passende mobile Höhe wählen

Die Symbolleisten mobiler Browser können den sichtbaren Seitenbereich verkleinern. Die Viewport-Höheneinheiten unterscheiden drei Zustände:

Das einfache vh entspricht dem großen Viewport. Es gibt auch Breitenvarianten wie svw, lvw und dvw. Für einen hohen Einstiegsbereich setzt min-height: 100svh ein stabiles Minimum und lässt längeren Inhalt mitwachsen. Bei einer festen height ragt überlaufender Inhalt heraus, wenn er höher wird. Dynamische Einheiten können Änderungen der Symbolleisten folgen, aber die Aktualisierung kann stufenweise erfolgen und das Layout bewegen.

Wähle die Bezugsgröße für die Höhe nach dem gewünschten Verhalten. Ein stabiler Einstiegsbereich kann auch nach dem Ausblenden der Symbolleisten den kleinen Viewport verwenden; er muss sich nicht erneut strecken, nur weil mehr Platz sichtbar wird. Ein Bereich, der diesem wechselnden Platz folgen soll, kann dynamische Einheiten verwenden und die mögliche Bewegung in Kauf nehmen. In beiden Fällen lässt eine Mindesthöhe zu, dass zusätzlicher Inhalt den Abschnitt im normalen Dokumentfluss verlängert.

Einen fließenden Wert begrenzen

min() wählt den kleineren Wert und kann eine Breite nach oben begrenzen: width: min(100%, 40rem) füllt das Elternelement, bis 40rem erreicht sind. max() wählt den größeren Wert und setzt eine Untergrenze. clamp() gibt in dieser Reihenfolge eine Untergrenze, einen bevorzugten Wert und eine Obergrenze an.

.title {
  font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}

Bei einer Schriftgröße des Wurzelelements von 16px liegt die Untergrenze bei 16px, die bevorzugte Größe bei 8px plus 2 % der Viewport-Breite und die Obergrenze bei 32px. Gehe die Grenzen durch:

1. Bei 375px beträgt die bevorzugte Größe 15,5px, also gilt das Minimum von 16px.
2. Bei 1000px beträgt die bevorzugte Größe 28px und liegt damit innerhalb der Grenzen.
3. Bei 1400px beträgt die bevorzugte Größe 36px, also gilt das Maximum von 32px.

Dieselben Funktionen akzeptieren Berechnungen wie min(100% - 2rem, 70rem). Achte auf kompatible Längenwerte und Leerzeichen um den Subtraktionsoperator.

Text, dessen Größe nur in vw festgelegt ist, kann auf schmalen Bildschirmen winzig und auf breiten riesig werden. Der Zoom auf dem Desktop verkleinert außerdem den Viewport in CSS-Pixeln, was die Vergrößerung dieses Textes aufheben kann. Ergänze einen schriftbezogenen Anteil und sinnvolle Grenzen und teste dann die Textvergrößerung: Ein gemischter Ausdruck aus rem und vw garantiert allein keine vollständige Vergrößerung auf 200 %.

Eine Medienabfrage wendet CSS an, wenn eine Bedingung zur Ausgabe, zum Viewport oder zu den Einstellungen der Lesenden erfüllt ist. Der Browser prüft erneut, wenn sich relevante Bedingungen ändern. So kann eine Änderung der Fenstergröße die Stile wechseln, ohne die Seite neu zu laden.

.heading { font-size: 1.25rem; }

@media (min-width: 40em) {
  .heading { font-size: 2rem; }
}

Bei der üblichen Browserstandardgröße von 16px entsprechen 40em genau 640px. Die größere Überschrift gilt ab dieser Breite aufwärts. In Medienabfragen beruhen em und rem auf der anfänglichen Schriftgröße des Browsers, nicht auf einer von der erstellenden Person für <html> festgelegten Größe. Bei einem Standardwert von 20px erfolgt derselbe Wechsel bei 800px.

Bedingungen genau lesen

min-width schließt seinen Grenzwert ein: 600px erfüllt min-width: 600px. Auch max-width schließt seinen Grenzwert ein. Die Bereichssyntax macht den Vergleich ausdrücklich:

@media (width >= 600px) { /* wider layout */ }
@media (600px <= width < 900px) { /* middle band */ }

Kombinierst du max-width: 600px mit min-width: 600px, treffen bei 600px beide zu. Mit 599px und 600px entsteht dagegen eine Lücke bei gebrochenen Breiten wie 599,5px. Abfragen mit aufsteigenden Mindestbreiten vermeiden diese Lücke; einander ergänzende Bereiche wie < 600px und >= 600px sind eine weitere Möglichkeit.

Medientypen bestimmen die Ausgabe: screen, print oder der Standardwert all. @media print kann die Navigation entfernen und dunklen Text auf weißem Papier verwenden. Bedingungen lassen sich auf nützliche Weise kombinieren:

only hat in aktuellen Browsern keine nützliche Wirkung. Breite und Höhe beschreiben den Viewport; orientation: portrait bedeutet, dass seine Höhe mindestens seiner Breite entspricht. Andere Merkmale prüfen Eingabegenauigkeit, Hover, Auflösung, reduzierte Bewegung und Farbschema. Ein Viewport im Querformat verrät nicht, ob die lesende Person eine Maus hat.

Für eine praktische Bedingung verlangt @media (hover: hover) and (pointer: fine) ein hauptsächliches Eingabegerät, das Hover und präzises Anvisieren beherrscht. Ein schmales, mit der Maus bedientes Fenster kann die Bedingung erfüllen, ein breites Gerät mit vorrangiger Touchbedienung dagegen möglicherweise nicht. Nutze die Abfrage für optionale Zeigereffekte; halte die zugrunde liegende Aktion über die normalen Steuerelemente der Seite verfügbar.

Die Kaskade im Blick behalten

Eine Medienabfrage erhöht die Spezifität eines Selektors nicht. In einem normalen Stylesheet mit gleich spezifischen Regeln setzt sich die spätere zutreffende Deklaration durch. Steht die .heading-Grundregel nach der obigen Regel für breite Bildschirme, setzt sie sich auch bei großen Breiten durch. Setze Grundregeln zuerst und die Abfragen, die sie ändern, danach.

Du kannst eine Bedingung auch in HTML angeben. <link rel="stylesheet" href="print.css" media="print"> wendet seine Regeln beim Drucken an, aber ein Browser kann die Datei dennoch mit geringerer Priorität herunterladen. Das media-Attribut eines <source>-Elements nutzt Bedingungen, um eine Bildquelle auszuwählen.

CSS nach dem Mobile-First-Prinzip beginnt mit dem schmalen Layout als gewöhnlichen Regeln außerhalb jeder Abfrage. Abfragen mit Mindestbreiten ergänzen dann Änderungen, sobald der Platz es erlaubt. Das passt zum normalen Dokumentfluss: Blöcke stehen bereits senkrecht untereinander, sodass die Grundseite oft wenig Layoutcode braucht.

CSS nach dem Desktop-First-Prinzip beginnt mit Regeln für breite Bildschirme und nimmt sie mit Abfragen nach Maximalbreiten zurück. Beide Ansätze können funktionieren, aber beim Mobile-First-Prinzip lassen sich die Grundlage und jede spätere Änderung meist leichter nachvollziehen.

Mit einer Spalte beginnen

.cards {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40em) {
  .cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64em) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Bei einem Standardwert von 16px erfolgen die Änderungen bei 640px und 1024px. Ein 500px breiter Viewport zeigt eine Spalte. Bei 800px trifft die erste Abfrage zu und ergibt zwei Spalten. Bei 1200px treffen beide Abfragen zu; die spätere Regel ergibt drei Spalten.

Die Abfrage für größere Breiten schaltet die frühere Abfrage nicht aus. Drehst du ihre Reihenfolge um, steht die 40em-Regel zuletzt und reduziert das breite Layout auf zwei Spalten. Ordne Abfragen mit aufsteigenden Mindestbreiten aufsteigend an, wenn sie dieselbe Eigenschaft mit derselben Spezifität ändern.

Den Breakpoint im Inhalt finden

Ein Breakpoint ist die Stelle, an der eine Abfrage das Layout ändert. Beginne mit dem tatsächlichen Inhalt in einem schmalen Fenster und verbreitere es dann langsam. Achte darauf, ob die Navigation ungünstig umbricht, Absätze zu lang werden oder Karten über eine sinnvolle Lesebreite hinaus gedehnt werden. Ergänze dort eine Änderung, wo sie diesen Inhalt verbessert.

Wähle einen Breakpoint nicht nur deshalb, weil ein bekanntes Gerät diese Breite hat. Bildschirme unterscheiden sich, Desktopfenster können jede Größe haben und eine größere Schrift kann dazu führen, dass dieselbe Navigation mehr Platz braucht. Breakpoints in relativen Einheiten können dem Layout helfen, auf die Standardtextgröße der Lesenden zu reagieren.

Teste nach jeder Änderung beide Seiten des Breakpoints und mehrere Breiten zwischen den Änderungen. Ein Layout, das nur bei 375px, 768px und 1280px richtig aussieht, hat noch viele Möglichkeiten zu scheitern. Fließende Breiten, Umbrüche und automatische Grid-Spalten bewältigen einen großen Teil der dazwischenliegenden Breiten.

Teste die Navigation und die Kartenliste zusammen, nachdem du eine Seitenleiste hinzugefügt hast. Das Fenster ist breiter geworden, aber die Hauptspalte möglicherweise schmaler, weil sie sich den Platz nun teilt. Ein Kartenlayout, das knapp unterhalb des Seiten-Breakpoints funktioniert hat, kann knapp darüber scheitern. Hier ist es sinnvoll, Karten umbrechen zu lassen oder in automatische Spalten einzupassen, während die Seite selbst eine explizite Abfrage nutzt.

Inhalt und Downloads sinnvoll halten

Auch Smartphone-Nutzende brauchen den Inhalt der Seite. Nimmt eine zweitrangige Erklärung zu viel Platz ein, ordne sie weiter unten an oder setze sie in ein natives aufklappbares <details>-Element, das Lesende öffnen können. Entferne notwendige Informationen nicht nur, damit ein schmaler Screenshot aufgeräumt aussieht.

Ein schmaler Einstieg hilft dir auch, eine schlanke Standardseite zu wählen. Das Ausblenden eines großen Bildes mit CSS verhindert seinen Download nicht zuverlässig; verwende HTML für responsive Bilder, um passende Dateien anzubieten. Eine lesbare einspaltige Seite mit einem kleineren Bild ist ein guter Ausgangspunkt; breitere Layouts schaffen dann Platz und ordnen den Inhalt neu an.

Ein Layout kann sich durch eine explizite Abfrage oder durch seine eigenen Größenregeln anpassen. Verwende eine Abfrage, wenn sich die Anordnung an einem gewählten Punkt ändern muss. Nutze ein intrinsisches Layout, wenn Elemente lediglich in den verfügbaren Platz passen müssen.

Grid die Spalten zählen lassen

.tiles {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
}

Bei einer Schriftgröße des Wurzelelements von 16px soll jede Spalte mindestens 240px breit sein. Grid platziert so viele wie möglich, zieht die Abstände ab und verteilt dann die verbleibende Breite mit 1fr. In einem 1000px breiten Container würden vier 240px breite Spalten plus drei Abstände zu 16px insgesamt 1008px brauchen, also passen nur drei hinein. Jede erhält etwa 322,7px. Ein 700px breiter Container erhält zwei Spalten zu 342px; ein 360px breiter erhält eine.

Das innere min(15rem, 100%) ist wichtig, wenn der Container schmaler als 240px ist. Damit kann das Minimum auf die verfügbare Breite sinken. Ohne diese Angabe würde das Minimum von 240px einen Überlauf erzwingen. auto-fit lässt leere Rasterspuren zusammenfallen, sodass sich einzelne Elemente ausdehnen können; auto-fill behält leere Rasterspuren bei und kann diese Elemente schmaler lassen.

Flex-Elemente umbrechen lassen

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.links > * { flex: 1 1 15rem; }

Jedes Element beginnt mit einer Basis von 15rem, kann schrumpfen oder wachsen und wechselt in eine neue Zeile, wenn kein weiteres Element in die Zeile passt. Jede Zeile verteilt ihren eigenen verbleibenden Platz. Zwei Elemente in der letzten Zeile können daher breiter werden als die Elemente darüber. Grid ist besser geeignet, wenn die Spaltenbreiten über mehrere Zeilen hinweg übereinstimmen sollen. Auch die Navigation kann umbrechen oder eine Abfrage kann ihre flex-direction auf column umstellen.

Bei Bedarf die ganze Seite ändern

Beginne die Seite im normalen Dokumentfluss. Ergänze dann eine Anordnung mit Seitenleiste:

@media (min-width: 48em) {
  .page {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 1rem;
  }
}

Bei der üblichen Standardgröße von 16px beginnt dies bei 768px. Die erste Spalte ist die Seitenleiste; die zweite nimmt den verbleibenden Platz ein. Das Minimum null lässt die Hauptspur schrumpfen; ihre Inhalte müssen trotzdem passend umbrechen oder scrollbar sein. Benannte Rasterbereiche können eine komplexere Anordnung ausdrücken.

Halte das HTML in einer sinnvollen Lesereihenfolge. Das Flex-order und die Platzierung im Grid ändern, wo Elemente erscheinen, aber Tastaturfokus und Screenreader folgen weiterhin der Quelltextreihenfolge. Teste dies, indem du nach dem Umordnen mit der Tabulatortaste durch die Links gehst.

Eine breite Datentabelle braucht möglicherweise ihre zweidimensionale Struktur. Gib ihr ein eigenes umschließendes Element zum Scrollen mit overflow-x: auto, tabindex="0", role="region" und einem zugänglichen Namen wie aria-label="Event schedule". Nur der Tabellenbereich sollte seitlich scrollen; die umgebende Seite sollte weiterhin umbrechen.

Eine Abfrage der Viewport-Breite liefert für jede Komponente einer Seite dieselbe Antwort. Für eine wiederverwendbare Karte kann das falsch sein: Das Fenster kann 1400px breit sein, während die Seitenleiste der Karte nur 300px gibt. Eine Container-Größenabfrage misst den verfügbaren Platz eines Vorfahrenelements, sodass sich die Karte an ihren tatsächlichen Platz anpassen kann.

Ein umschließendes Element deklarieren und seinen Inhalt gestalten

<div class="card-wrap">
  <article class="card">...</article>
</div>

.card-wrap { container-type: inline-size; }
.card { display: grid; gap: 1rem; }

@container (min-width: 25rem) {
  .card { grid-template-columns: 8rem minmax(0, 1fr); }
}

Bei horizontaler Schreibrichtung ist inline-size die Breite. Die Deklaration legt fest, dass das umschließende Element Abfragen zur Inline-Größe beantworten kann. Bei einer Schriftgröße des Wurzelelements von 16px sind 25rem gleich 400px. Eine Karte in einem 300px breiten umschließenden Element bleibt untereinander angeordnet; eine andere in einem 500px breiten Element platziert ihr Bild neben dem Text. Beide können gleichzeitig auf derselben Seite stehen.

Eine Abfrage misst ein Vorfahrenelement des gestalteten Elements. Setzt du container-type nur auf .card und versuchst dann, dieselbe Karte zu ändern, sucht die Abfrage weiterhin oberhalb davon. Nutze ein umschließendes Element als Messbox und die innere Karte als gestaltete Box.

Das gewünschte Vorfahrenelement auswählen

Eine unbenannte Größenabfrage nutzt den nächstgelegenen geeigneten übergeordneten Größencontainer. In einem verschachtelten Layout kann das ein inneres umschließendes Element sein. Mit einem Namen kannst du ein bestimmtes Vorfahrenelement auswählen:

.panel { container: sidebar / inline-size; }

@container sidebar (width >= 30rem) {
  .panel-title { font-size: 1.5rem; }
}

Die Kurzschreibweise legt sowohl den Namen als auch den Typ fest. Gibt es kein geeignetes Vorfahrenelement, trifft die Abfrage nicht zu; die Grundstile gelten weiter. Bedingungen können Bereiche und logische Operatoren wie and, or und not verwenden.

Sicherstellen, dass der Container seine Größe erhält

Das Containment verhindert, dass das abgefragte Maß von genau den Inhalten abhängt, die durch die Abfrage anders gestaltet werden können. Setze container-type auf eine Box, deren Breite sich aus dem übergeordneten Layout ergibt, etwa einen Block, einen Rasterbereich oder ein wachsendes Flex-Element. Eine Box, die auf ihren Inhalt schrumpft, kann zusammenfallen, wenn ihr Inhalt nicht mehr zu ihrer Inline-Größe beiträgt.

container-type: size unterstützt Breiten- und Höhenabfragen, schließt aber auch die Größenberechnung in Blockrichtung ein. Die Höhe braucht eine unabhängige Größenfestlegung, sonst kann sie zusammenfallen. Für gewöhnliche Karten erlaubt inline-size, dass die Höhe weiterhin dem Inhalt folgt. Der Standardwert normal richtet keinen Container für Größenabfragen ein.

Zu den Größenmerkmalen gehören Breite, Höhe, Inline-Größe, Blockgröße, Seitenverhältnis und Ausrichtung, sofern der gewählte Containertyp die jeweiligen Maße unterstützt. Aktuelle gängige Browser unterstützen Größenabfragen. Behalte ein nutzbares Grundlayout mit untereinander angeordneten Inhalten bei, damit die Karte auch funktioniert, wenn ein Browser die Erweiterung ignoriert.

Eine responsive Seite kann drei Ansätze kombinieren: automatischen Umbruch, Viewport-Bedingungen und Komponentenbedingungen. Entscheide, welche Informationen das Layout braucht, bevor du eine Abfrage wählst.

Größen innerhalb eines Containers festlegen

Container-Abfrageeinheiten beschreiben Prozentanteile eines geeigneten übergeordneten Containers. cqw und cqh beziehen sich auf Breite und Höhe. cqi und cqb beziehen sich auf Inline- und Blockgröße. cqmin und cqmax beziehen sich auf das kleinere beziehungsweise größere der beiden Maße. Bei horizontaler Schreibrichtung ist die Inline-Größe die Breite.

In einem geeigneten 400px breiten Container sind 5cqi gleich 20px. In einem 600px breiten Container sind es 30px. So kann eine Überschrift ihrer eigenen Komponente folgen, selbst wenn die ganze Seite gleich breit bleibt.

Begrenze Textgrößen:

.card-wrap { container-type: inline-size; }
.card h2 {
  font-size: clamp(1rem, 4cqi, 1.5rem);
}

Bei einer Schriftgröße des Wurzelelements von 16px ergibt ein 300px breites umschließendes Element einen bevorzugten Wert von 12px, also gilt das Minimum von 16px. Bei 600px sind 4cqi gleich 24px und entsprechen damit der Obergrenze. Breitere umschließende Elemente können die Überschrift nicht über 24px hinaus vergrößern. Teste neben Änderungen der Größe des umschließenden Elements auch die Vergrößerung; fließender Text muss auch bei Zoom nutzbar bleiben.

Container-Einheiten wählen für die gemessene Richtung das nächstgelegene geeignete Vorfahrenelement. Gibt es keines, greifen sie auf Einheiten des kleinen Viewports zurück. Ein vergessenes container-type kann daher dazu führen, dass sich Text mit dem Fenster ändert, obwohl es zu funktionieren scheint. Untersuche die Vorfahrenelemente, wenn eine Größe dem falschen Bereich zu folgen scheint. Ein Containername in einer Abfrage bewirkt für sich allein nicht, dass alle Container-Einheiten auf dieses benannte Vorfahrenelement bezogen werden.

Die Werkzeuge kombinieren

Eine Medienabfrage kann die Seite bei 48em auf Spalten für Seitenleiste und Hauptbereich umstellen. Innerhalb des Hauptbereichs kann ein automatisches Grid so viele Karten einpassen, wie der Platz erlaubt. Die eigene Container-Abfrage einer Karte kann ihr Bild erst dann neben den Text verschieben, wenn genau dieser Platz breit genug ist.

Ersetze eine Abfrage für reduzierte Bewegung oder Hover nicht durch eine Container-Abfrage. Die Maße einer Box verraten weder die Einstellungen noch das Eingabegerät der lesenden Person. Ebenso bindet das Kopieren der Regeln einer Karte in separate Viewport-Abfragen für jede Stelle der Seite die wiederverwendbare Komponente an jedes umgebende Layout. Lass den örtlich verfügbaren Platz entscheiden, wann sich ihre Anordnung ändert.

Ein Bild kann breiter sein als der Platz, den das Layout ihm gibt. Beginne mit einer Regel, die es unter Beibehaltung seiner Form schrumpfen lässt:

img, video {
  max-width: 100%;
  height: auto;
}

max-width begrenzt die angezeigte Breite auf den Container, ohne ein kleines Bild zu zwingen, ihn auszufüllen. width: 100% würde ein kleines Logo auf die volle Breite strecken. Die automatische Höhe erhält das Seitenverhältnis, wenn sich die Breite ändert.

Platz vor dem Download reservieren

Behalte die Größenattribute im HTML:

<img src="coast.jpg" width="1200" height="800"
     alt="A rocky coast with a walking path">

Diese Maße ergeben ein Seitenverhältnis von 3:2, sodass der Browser Platz reservieren kann, bevor die Datei eintrifft. Zeigt CSS das Bild 360px breit an, beträgt die passende Höhe 240px. Werden die Attribute entfernt, weil das Bild responsiv ist, geht diese frühe Größeninformation verloren. CSS kann das angezeigte Bild weiterhin kleiner als die Attributmaße darstellen.

Gib bei einem eingebetteten Videoplayer der Box ein eigenes Verhältnis:

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

So bleibt die Form des Players im Verhältnis 16:9 erhalten, während sich seine Breite ändert. Lass Höhen bei Text vom Inhalt bestimmen; ein festes Seitenverhältnis ist für Medienboxen mit bekannter Form nützlich.

Entscheiden, ob Zuschneiden erlaubt ist

Ein Vorschaubild auf einer Karte muss oft eine einheitliche Box füllen. Gib ihm eine Breite und ein Seitenverhältnis und wähle dann, wie die Quelle eingepasst wird:

.thumbnail {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top;
}

cover füllt die Box und schneidet Teile ab, die darüber hinausragen. contain zeigt das ganze Bild und kann leere Streifen lassen. Der Standardwert fill streckt das Bild auf die Box, wodurch es verzerrt werden kann. object-position wählt die Ausrichtung beim Einpassen; die Ausrichtung oben hält in diesem Beispiel den oberen Teil sichtbar.

Für einen konkreten Vergleich setze ein Foto mit 400 × 200 in ein Vorschaubild mit 320 × 240. Cover skaliert es auf 480 × 240 und schneidet dann insgesamt 160px der skalierten Breite ab. Contain skaliert es auf 320 × 160, sodass insgesamt 80px Höhe ungenutzt bleiben. Beide erhalten die Proportionen der Quelle; die Entscheidung ist, ob die Box gefüllt werden muss oder das ganze Bild sichtbar bleiben soll.

Inhaltsbilder gehören als <img> mit aussagekräftigem Alternativtext in die Seite. CSS-Hintergründe eignen sich für Dekoration; background-size: cover kann sie zuschneiden, damit sie ihre Box füllen, und Medienabfragen können die Hintergrunddatei wechseln.

Für Bilder unterhalb des zuerst sichtbaren Bereichs kann loading="lazy" den Abruf verzögern, bis die lesende Person in ihre Nähe gelangt. Lass das Hauptbild im Einstiegsbereich sofort laden, damit es früh erscheinen kann. Wird ein 4000 Pixel breites Foto mit CSS verkleinert, wird es dennoch vollständig heruntergeladen; für die Auswahl einer kleineren Datei ist HTML für responsive Bilder nötig.

Ein Foto kann in mehreren Dateien mit demselben Inhalt und denselben Proportionen, aber unterschiedlichen Pixelmaßen vorliegen. Beim Auflösungswechsel wählt der Browser eine Datei anhand der Anzeigegröße, der Bildschirmpixeldichte und seiner Ladeentscheidungen aus. Das spart unnötige Daten und erhält zugleich genügend Details.

Feste Anzeigegröße: Pixeldichtedeskriptoren

<img src="logo-200.png"
     srcset="logo-200.png 1x, logo-400.png 2x"
     width="200" height="80" alt="Northwind Books">

Das Logo wird 200 CSS-Pixel breit angezeigt. Die 200-Pixel-Datei passt zu einem Bildschirm mit dem Verhältnis 1; die 400-Pixel-Datei liefert bei einem Verhältnis von 2 zwei Quellpixel pro angezeigtem CSS-Pixel. Diese Form verwendet x-Deskriptoren und benötigt kein sizes-Attribut.

Veränderliche Anzeigegröße: Breitendeskriptoren

<img src="park-800.jpg"
     srcset="park-480.jpg 480w,
             park-800.jpg 800w,
             park-1600.jpg 1600w"
     sizes="(min-width: 64em) 50vw, 100vw"
     width="1600" height="1000"
     alt="Trees around a park pond">

Jeder w-Wert muss die tatsächliche Pixelbreite der Datei angeben. Er legt keine CSS-Breite fest. Das CSS steuert weiterhin die Box und sizes beschreibt dem Browser die vorgesehene Anzeigebreite.

Die erste zutreffende Bedingung in sizes setzt sich durch. Bei einer Browserstandardgröße von 16px ist der Platz ab 1024px Breite 50vw breit, darunter 100vw. Die letzte Länge ohne Bedingung ist der Ersatzwert. Längen können Viewport-, Pixel- oder Schrifteinheiten und Berechnungen wie calc(100vw - 2rem) verwenden, aber keine Prozentwerte. Fehlt sizes bei Breitendeskriptoren, nimmt der Browser normalerweise 100vw an.

Die nötigen Bilddetails ermitteln

Multipliziere die angegebene Anzeigebreite mit dem Gerätepixelverhältnis. Für die Auswahl der kleinsten ausreichenden Datei vergleiche diesen Zielwert mit den angebotenen Dateibreiten:

1. Ein 1200px breiter Viewport mit dem Verhältnis 1 nutzt den 50vw breiten Platz: 600 CSS-Pixel. Die 800w-Datei ist die erste ausreichend große Datei.
2. Ein 390px breiter Viewport mit dem Verhältnis 3 nutzt 390 CSS-Pixel. Er braucht 1170 Quellpixel, daher erfüllt 1600w den Zielwert.
3. Derselbe schmale Viewport braucht bei einem Verhältnis von 2 insgesamt 780 Quellpixel; 800w erfüllt diesen Wert.

Browser können eine größere Datei aus dem Cache wiederverwenden oder bei eingeschränkten Ladebedingungen eine kleinere bevorzugen. Der HTML-Quelltext liefert Kandidaten und Größeninformationen, keinen unbedingten Befehl zum Abrufen einer bestimmten Datei.

Browser beginnen Bilder abzurufen, bevor das vollständige CSS-Layout verfügbar ist. Deshalb gehört der Größenhinweis ins HTML. Gibt das CSS einem Bild die halbe Viewport-Breite, aber sizes nennt 100vw, lädt der Browser möglicherweise eine zu große Datei. Aktualisiere sizes, wenn sich das Layout ändert. Behalte src als Ersatz und verwende einen einzigen alt-Text. Unterschiedliche Ausschnitte brauchen <picture>, weil gewöhnliche Auflösungskandidaten austauschbare Ansichten desselben Bildes bleiben sollten.

Werden die Pixelmaße eines Fotos reduziert, bleibt der Bildaufbau gleich. Manchmal braucht ein Smartphone einen anderen Bildaufbau: Auf einem breiten Bühnenfoto kann die vortragende Person zu klein sein, um sie zu erkennen. Art Direction ändert den Ausschnitt oder das Bild, damit das wichtige Motiv deutlich bleibt.

Das <picture>-Element bietet eine geordnete Auswahl von Quellen, gefolgt von einem erforderlichen <img>:

<picture>
  <source media="(min-width: 50em)"
          srcset="stage-wide.jpg" width="1600" height="900">
  <img src="stage-close.jpg" width="800" height="1000"
       alt="A speaker presenting on stage">
</picture>

Bei einem Standardwert von 16px wird ab 800px der breite Ausschnitt gewählt; darunter verwendet das Bild den engeren Ausschnitt. Das <img> bleibt das angezeigte Element. Es liefert den Ersatz und den Alternativtext und wird durch dein Bild-CSS gestaltet. Ein <picture> ohne <img> zeigt kein Bild an.

Die spezifischsten Bedingungen zuerst aufführen

Der Browser wählt die erste unterstützte Quelle, deren Bedingungen zutreffen. Angenommen, du bietest Ausschnitte bei 30em und 60em an. Führe zuerst das Minimum von 60em auf, dann 30em und dann den Ersatz. Steht 30em zuerst, trifft es auch auf einen sehr breiten Bildschirm zu und verhindert, dass der Browser 60em erreicht. Bereiche ohne Überschneidung können die beabsichtigte Auswahl ebenfalls verdeutlichen.

Die media-Bedingung einer Quelle ist eine Auswahlanweisung. Gewöhnliche srcset-Kandidaten und sizes liefern dem Browser dagegen Informationen, um eine passende Auflösung zu wählen. Nutze Art Direction, wenn sich der Bildaufbau ändern muss; nutze Auflösungswechsel, wenn der Bildinhalt gleich bleibt.

Formate nach Vorzug anbieten

<picture>
  <source type="image/avif" srcset="hall.avif">
  <source type="image/webp" srcset="hall.webp">
  <img src="hall.jpg" width="1200" height="800"
       alt="Rows of seats in a lecture hall">
</picture>

Ein Browser, der das erste Format unterstützt, kann es verwenden; andernfalls versucht er die nächste unterstützte Option und schließlich das JPEG als Ersatz. AVIF und WebP liefern bei vergleichbarer visueller Qualität häufig kleinere Dateien. Das type-Attribut erlaubt dem Browser, nicht unterstützte Formate zu überspringen, ohne sie zur Prüfung herunterzuladen.

Jede Quelle kann mit eigenem srcset und sizes auch mehrere Breiten anbieten. Das verbindet einen gewählten Ausschnitt oder ein Format mit dem Auflösungswechsel. Haben die für Art Direction gewählten Ausschnitte unterschiedliche Proportionen, ermöglichen Größenattribute an den Quellen dem Browser, für jeden Ausschnitt den passenden Platz zu reservieren.

Schreibe den Alternativtext einmal am <img> und stelle sicher, dass er jeden Ausschnitt beschreibt. Entfernt ein enger Ausschnitt eine zweite Person, passt eine Beschreibung, die zwei Personen nennt, nicht mehr. Verwende für ein rein dekoratives Bild alt="", damit es keine unnötigen gesprochenen Inhalte ergänzt.

Eine responsive Seite muss über einen Bereich hinweg getestet werden, nicht nur auf einigen benannten Geräten. Öffne die responsive Ansicht des Browsers, stelle einen schmalen Viewport von etwa 320px ein und ziehe ihn zu einem breiten Fenster auf. Beobachte dabei Überschriften, Navigation, Karten und Bildränder. Teste unmittelbar unterhalb, genau bei und oberhalb jedes Breakpoints.

Entwicklerwerkzeuge können Viewport-Maße, Gerätepixelverhältnis und Touchbedienung emulieren. Chrome und Edge bieten eine Gerätesymbolleiste; Firefox und Safari bieten responsive Designmodi. Emulation ist nützlich, aber echte Geräte können sich beim Verhalten der Symbolleisten, bei Touchbedienung, Schriftarten und Leistung unterscheiden. Prüfe ein echtes Smartphone und ein Tablet in beiden Ausrichtungen sowie ein Desktopfenster mit veränderter Größe.

Umbruch und vergrößerten Text prüfen

Das WCAG-Erfolgskriterium für Umbruch auf Stufe AA verlangt, dass gewöhnliche Inhalte bei einer Breite von 320 CSS-Pixeln funktionieren, ohne Scrollen in zwei Richtungen zu erfordern. Ein 1280px breiter Viewport bei 400 % Zoom bietet diese Breite. Stelle für eine direkte Prüfung der schmalen Breite einen responsiven Viewport von 320px ein und teste außerdem den tatsächlichen Desktop-Zoom, um zu sehen, wie sich die Seite vergrößert.

Inhalte, die ein zweidimensionales Layout brauchen, etwa eine Datentabelle, eine Karte oder ein Diagramm, dürfen diese Anordnung behalten. Beschränke nötiges seitliches Scrollen auf einen eigenen Bereich. Umliegende Überschriften, Anweisungen und Absätze sollten weiterhin in die Seitenbreite passen.

Nutze realistische Inhalte: eine lange Überschrift, eine URL ohne Umbruch, viele Links und längeren übersetzten Text. Erhöhe auch die Standardschriftgröße des Browsers. Eine Box, die mit einem kurzen Beispiel geräumig wirkte, kann überlaufen, wenn der Text wächst.

Horizontalen Überlauf zurückverfolgen

Eine seitliche Bildlaufleiste oder ein leerer Streifen am rechten Rand bedeutet oft, dass eine Box über den Viewport hinausragt. Untersuche verdächtige Elemente und vergleiche ihre Boxränder mit der Seitengrenze. Umrande sie vorübergehend:

* { outline: 1px solid red; }

Eine Kontur zeigt die Boxen, ohne ihre gemessene Breite zu vergrößern. Suche nach festen Breiten, 100vw-Blöcken, Bildern ohne Breitenbegrenzung, Rasterspuren mit großer Mindestbreite, negativen Außenabständen, langem Text und Codeblöcken.

Stimme die Korrektur auf die Ursache ab:

Verbirg den horizontalen Überlauf der ganzen Seite nicht als Abkürzung. body { overflow-x: hidden; } kann die Bildlaufleiste verschwinden lassen, während Inhalt außerhalb der Reichweite der Lesenden bleibt.

Teste bei einer Tabelle mit eigenem Scrollbereich sowohl die Bedienung als auch die Breite. Erreiche das benannte umschließende Element mit der Tastatur und prüfe, ob das horizontale Scrollen jede Spalte sichtbar macht. Gehe dann mit der Tabulatortaste zum nächsten Steuerelement weiter. Die Tabelle kann seitliche Bewegung erfordern, ohne den Absatz darüber oder den Rest der Seite in denselben breiten Scrollbereich zu zwingen.

Untersuche zuletzt Bildanfragen im Netzwerkbereich. Stelle sowohl einen Viewport in Smartphone-Größe als auch ein realistisches hohes Gerätepixelverhältnis ein, lade unter den vorgesehenen Testbedingungen neu und prüfe den gewählten Kandidaten und die Dateigröße. Ein optisch kleines Bild kann dennoch einen großen Download verursachen, wenn sein sizes-Hinweis falsch ist.

Die Breite ist nur ein Teil des responsiven Verhaltens. Ein breites Tablet kann per Touch bedient werden; ein schmales Desktopfenster kann eine Maus nutzen. Seiten müssen auch mit Zoom, größerem Text, unterschiedlichen Ausrichtungen und den bevorzugten Bewegungs- und Farbeinstellungen der Lesenden funktionieren.

Steuerelemente leicht erreichbar machen

Die WCAG 2.2 auf Stufe AA verlangen für die Zielgröße mindestens 24 × 24 CSS-Pixel oder ausreichenden Abstand nach der Abstandsregel, mit Ausnahmen wie Links innerhalb von Sätzen. Das Größenkriterium auf Stufe AAA verwendet 44 × 44 CSS-Pixel, ebenfalls mit Ausnahmen. Größere Navigationslinks mit Innenabstand sind oft bequemer als eine dichte Reihe winziger Beschriftungen.

Bei einer Schriftgröße des Wurzelelements von 16px hat ein Link mit 16px großem Text, line-height: 1.5 und padding: 0.75rem 1rem eine 24px hohe Zeilenbox plus 12px oben und unten: insgesamt 48px Höhe. Mache den Link selbst zur anklickbaren Box mit Innenabstand.

Wichtige Informationen dürfen nicht von Hover abhängen. Halte Aktionen sichtbar oder per Tippen und Tastaturfokus erreichbar. Ergänze optionale Hover-Effekte nur, wenn das hauptsächliche Eingabegerät sie unterstützt:

@media (hover: hover) and (pointer: fine) {
  .card:hover { outline: 2px solid currentColor; }
}

pointer: coarse beschreibt ein ungenaues hauptsächliches Eingabegerät wie einen Finger. any-pointer und any-hover prüfen, ob irgendein angeschlossenes Eingabegerät eine Fähigkeit besitzt; sie stellen nicht fest, dass alle Lesenden es verwenden.

Vergrößerten Text und Drehung unterstützen

Lass Zoom aktiviert und prüfe die Textvergrößerung auf 200 % ohne Verlust von Inhalt oder Funktionen. Verwende schriftbezogene Größen und wachsende Textboxen. min-height lässt eine Box wachsen, wenn ihr Inhalt wächst; bei fester Höhe kann vergrößerter Text in den nächsten Abschnitt hineinragen.

Unterstütze Hoch- und Querformat, sofern nicht eine Ausrichtung für die Tätigkeit wesentlich ist. Smartphones im Querformat können sehr wenig vertikalen Platz haben. Eine Höhenabfrage wie @media (max-height: 30em) kann einen haftenden Kopfbereich mitscrollen lassen, damit er den Inhalt nicht verdeckt.

Einstellungen und Ausgabe berücksichtigen

Nutze prefers-reduced-motion, um große Bewegungen für Lesende zu vermeiden, die weniger Bewegung wünschen. Eine Möglichkeit ist, optionale Animationen innerhalb von @media (prefers-reduced-motion: no-preference) zu platzieren. Du kannst eine vorhandene Animation auch innerhalb einer reduce-Abfrage entfernen.

Kombiniere für ein dunkles Design lesbare Text- und Hintergrundfarben innerhalb von @media (prefers-color-scheme: dark). Prüfe den Kontrast in beiden Designs. color-scheme: light dark lässt vom Browser gezeichnete Steuerelemente und Bildlaufleisten einem passenden Design folgen; es wählt nicht alle Seitenfarben für dich aus.

Eine Regel für reduzierte Bewegung kann nur auf die animierte Komponente zielen:

@media (prefers-reduced-motion: reduce) {
  .banner { animation: none; }
}

Halte die Nachricht selbst verfügbar, wenn die Bewegung entfernt wird. Ändere bei einem dunklen Design Vordergrund und Hintergrund gemeinsam; änderst du nur eines davon, kann Text mit seiner Umgebung verschmelzen. Prüfe auch die Vorschau der Formularsteuerelemente, da vom Browser gezeichnete Steuerelemente von den selbst gestalteten Flächen abweichen können.

Nutze @media print, um Navigation und Schaltflächen auszublenden und dunklen Text auf weißem Hintergrund auszugeben. Gedruckte Links können ihre Ziele mit a[href]::after { content: " (" attr(href) ")"; } anzeigen. Prüfe in der Druckvorschau, ob Inhalte, Hintergründe und Seitenumbrüche lesbar bleiben.