CSS-Techniken für Widescreen- und Ultrawide-Monitore

Eine Website bleibt auf Widescreen- und Ultrawide-Monitoren lesbar, wenn ihre Textspalten eine Höchstbreite behalten und drei CSS-Techniken greifen: clamp() lässt Schriftgrößen zwischen fester Unter- und Obergrenze mitwachsen, Container Queries richten Komponenten nach ihrem eigenen Platz aus, und auto-fit berechnet die Zahl der Rasterspalten selbst. Alle drei laufen in Chrome, Edge, Firefox und Safari, Container Queries seit Februar 2023.

Ultrawide-Monitore haben zum Beispiel 3440×1440 Pixel (Seitenverhältnis 21:9), Super-Ultrawide-Modelle 5120×1440 Pixel (32:9). In der Steam-Hardware-Umfrage vom August 2026 nutzten 3,14 Prozent der erfassten Rechner einen Hauptbildschirm mit 3440×1440 Pixeln, mehr als mit jeder anderen dort einzeln aufgeführten Ultrawide-Auflösung. Eine Website, die für 1920×1080 Pixel gebaut wurde, füllt auf einem 3440 Pixel breiten Bildschirm nur rund 56 Prozent der Breite und auf einem 5120 Pixel breiten nur 37,5 Prozent. Rechts und links bleibt leere Fläche, oder die Textzeilen werden unlesbar lang. Klassische Media Queries, also CSS-Regeln, die erst ab einer bestimmten Fensterbreite greifen, lösen das nur teilweise. Die Fensterbreiten, an denen solche Regeln umschalten, heißen Breakpoints. Media Queries kennen die Breite des Browserfensters, nicht aber die Breite der Komponente, die gerade gerendert wird. Drei CSS-Techniken schließen diese Lücke: clamp() für fließende Größen, Container Queries für Komponenten, die sich nach ihrem eigenen Platz statt nach dem Bildschirm richten, und ein Rasterlayout, das seine Spaltenzahl automatisch nachzieht.

Welche Auflösungen haben Widescreen-Monitore?

Widescreen-Monitore haben meist 1920×1080 oder 2560×1440 Pixel im Format 16:9. Diese beiden Auflösungen stellten im August 2026 zusammen 72,38 Prozent der Hauptbildschirme in der Steam-Hardware-Umfrage. Ultrawide-Monitore mit der Handelsangabe 21:9 kommen auf 3440×1440 oder 2560×1080 Pixel, Super-Ultrawide-Monitore mit 32:9 zum Beispiel auf 5120×1440 Pixel.

Widescreen bezeichnet jedes Bildschirmformat, das breiter ist als das ältere Format 4:3, heute vor allem 16:9 und 16:10. Ultrawide-Monitore tragen im Handel die Angabe 21:9, Super-Ultrawide-Monitore die Angabe 32:9. Die Formatangaben sind gerundet: 3440×1440 Pixel ergeben rechnerisch ein Verhältnis von 2,39:1, während 21:9 genau 2,33:1 wären.

Hinweis: Die Steam-Umfrage erfasst nur Rechner, auf denen die Spieleplattform Steam läuft, und die Teilnahme ist freiwillig. Die Anteile zeigen, welche Formate verbreitet sind. Wie Büroarbeitsplätze ausgestattet sind, lässt sich daraus nicht ablesen.

Für das Layout zählt die Breite in CSS-Pixeln, der Maßeinheit, mit der Stylesheets rechnen. Bei 100 Prozent Skalierung im Betriebssystem und 100 Prozent Browserzoom entspricht ein Bildschirmpixel einem CSS-Pixel. Bei 150 Prozent Skalierung stellt derselbe 3440 Pixel breite Monitor nur noch rund 2293 CSS-Pixel dar. Ein Seitenlayout mit einer festen Höchstbreite von 1200 Pixeln belegt bei 100 Prozent Skalierung nur einen Teil der Fensterbreite:

• 1920 Pixel Fensterbreite: Das Layout füllt 62,5 Prozent, 720 Pixel bleiben leer.
• 2560 Pixel Fensterbreite: Das Layout füllt 46,9 Prozent, 1360 Pixel bleiben leer.
• 3440 Pixel Fensterbreite: Das Layout füllt 34,9 Prozent, 2240 Pixel bleiben leer.
• 5120 Pixel Fensterbreite: Das Layout füllt 23,4 Prozent, 3920 Pixel bleiben leer.

Fließende Größen statt fester Breakpoints

Breakpoints, also feste Fensterbreiten, an denen eine Media Query greift, lassen eine Schriftgröße sprunghaft wechseln. Die CSS-Funktion clamp(minimum, bevorzugter-wert, maximum) berechnet dagegen einen Wert, der zwischen einer Unter- und einer Obergrenze mit dem Ansichtsfenster mitwächst. Für eine Überschrift bedeutet das: Sie bleibt auf einem Smartphone lesbar groß, wächst auf einem Laptop moderat mit und stoppt auf einem Ultrawide-Monitor, bevor sie überdimensioniert wirkt.

h1 {
  font-size: clamp(1.75rem, 1.1rem + 2vw, 3.25rem);
}

.content {
  max-inline-size: min(75ch, 92vw);
  margin-inline: auto;
}

Der Browser löst clamp(MIN, VAL, MAX) als max(MIN, min(VAL, MAX)) auf. Liegt der bevorzugte Wert unter der Untergrenze, gilt die Untergrenze, liegt er darüber, gilt die Obergrenze. Bei der üblichen Grundschriftgröße von 16 Pixeln je rem ergibt die Regel für h1 diese Werte:

• 390 Pixel breites Smartphone-Fenster: 1,1rem + 2vw ergeben 25,4 Pixel, deshalb setzt clamp() die Untergrenze von 28 Pixeln.
• 1280 Pixel breites Laptop-Fenster: Der bevorzugte Wert von 43,2 Pixeln liegt zwischen den Grenzen und gilt unverändert.
• 1720 Pixel Fensterbreite: Der bevorzugte Wert erreicht 52 Pixel und damit die Obergrenze von 3,25rem.
• 3440 Pixel breites Ultrawide-Fenster: Bevorzugt wären 86,4 Pixel, clamp() hält die Überschrift bei 52 Pixeln.

Die zweite Regel begrenzt eine Textspalte auf 75ch, also ungefähr 75 Zeichen Breite, gleichzeitig aber auf maximal 92 Prozent der Ansichtsfensterbreite, damit auf sehr schmalen Bildschirmen kein Rand entsteht. margin-inline: auto zentriert die Spalte unabhängig davon, wie breit der umgebende Bildschirm ist.

Wie lang darf eine Textzeile auf einem breiten Monitor sein?

Eine Textzeile sollte auch auf einem breiten Monitor höchstens 80 Zeichen lang sein. Diese Grenze nennt das Erfolgskriterium 1.4.8 der Web Content Accessibility Guidelines (WCAG) 2.2, der Barrierefreiheitsrichtlinien des W3C, für die höchste Konformitätsstufe AAA. Für chinesische, japanische und koreanische Schrift gelten 40 Zeichen.

Das W3C begründet die Grenze mit Menschen, die eine Lese- oder Sehbeeinträchtigung haben: In einem schmalen Textblock finden sie leichter den Anfang der nächsten Zeile. Ohne Höchstbreite läuft ein Absatz auf einem 3440 Pixel breiten Fenster über die volle Breite, und nach jeder Zeile muss der Blick den ganzen Weg zurück an den linken Rand.

Die CSS-Einheit ch misst die Breite der Ziffer 0 in der verwendeten Schrift. Eine Spalte mit max-inline-size: 75ch fasst deshalb nicht genau 75 Buchstaben, denn schmale Buchstaben wie i und l brauchen weniger Platz als die Ziffer, breite wie m und w mehr. Wie viele Zeichen am Ende in eine Zeile passen, hängt auch von der Schriftwahl im Web ab. Wer die Grenze von 80 Zeichen sicher einhalten will, zählt in einem echten Absatz nach, statt sich auf den ch-Wert zu verlassen.

Container Queries für Komponenten mit eigener Logik

Eine Media Query fragt nach der Breite des gesamten Ansichtsfensters. Eine Container Query fragt stattdessen nach der Breite des Elements, in dem eine Komponente steht. Das ist wichtig für Layouts mit mehreren Spalten, in denen dieselbe Karte mal schmal und mal breit gerendert wird. Chrome und Safari unterstützen Container Queries seit September 2022 (Chrome 105, Safari 16), Firefox zog im Februar 2023 mit Version 110 nach. Seitdem gelten sie in allen aktuellen Browsern als einsetzbar.

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 32rem) {
  .card {
    grid-template-columns: 10rem 1fr;
  }
}

Die Karte zeigt Bild und Text übereinander, solange ihr Container schmaler als 32rem ist, und wechselt automatisch auf ein Nebeneinander, sobald in einem breiten Raster mehr Platz zur Verfügung steht. Wie breit der Bildschirm insgesamt ist, spielt dafür keine Rolle.

Container Queries bringen eigene Längeneinheiten mit. Die Einheit cqi entspricht einem Prozent der Inline-Größe des umgebenden Containers, in waagerecht laufender Schrift also einem Prozent seiner Breite. Eine Kartenüberschrift mit font-size: clamp(1rem, 0.5rem + 3cqi, 1.5rem) wächst deshalb mit der Breite der Karte. Findet der Browser keinen passenden Container, rechnet er diese Einheiten nach der kleinen Viewport-Größe.

Merke: Seit dem 14. August 2025 sind Container Queries Baseline Widely available. Baseline ist die Einstufung der WebDX Community Group beim W3C: Eine Funktion ist Newly available, sobald Chrome, Edge, Firefox und Safari sie auf Desktop und Mobilgerät unterstützen, und Widely available 30 Monate danach. Laut caniuse.com liefen im August 2026 rund 94 Prozent der weltweit erfassten Browsernutzung in einer Version mit Container Queries.

Rasterspalten, die den verfügbaren Platz selbst berechnen

Statt eine feste Spaltenzahl pro Breakpoint zu definieren, kann auto-fit in Kombination mit minmax() die Anzahl der Spalten dem verfügbaren Platz überlassen.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
}

Der Browser setzt so viele Spalten, wie mit ihrer Mindestbreite von 18rem (288 Pixel) samt Abstand von 1,5rem (24 Pixel) in den Container passen, ganz ohne zusätzliche Media Query. Die Spaltenzahl ergibt sich aus der Containerbreite plus 24 Pixel, geteilt durch 312 Pixel und abgerundet. Füllt das Raster die volle Fensterbreite ohne Seitenränder und Scrollleiste, entstehen diese Spalten:

Jede Spalte bleibt dabei mindestens 18rem breit, sodass eine Karte nie so schmal wird, dass ihr Inhalt umbricht. Seitenränder und Scrollleisten ziehen einige Pixel ab und können an der Grenze eine Spalte kosten.

Der Unterschied zwischen auto-fit und auto-fill zeigt sich erst, wenn wenige Karten in einem breiten Raster stehen. Nach der Beschreibung von repeat() bei MDN fallen mit auto-fit leere Spalten weg, und die vorhandenen Karten teilen sich die ganze Breite. Drei Karten in einem 3440 Pixel breiten Raster werden so jeweils rund 1131 Pixel breit. Mit auto-fill bleiben die leeren Spalten als Platzhalter stehen, und jede Karte behält rund 291 Pixel.

Tipp: Soll ein Raster auf einem Ultrawide-Monitor nicht auf 16 Spalten wachsen, begrenzt max-inline-size: 80rem es auf 1280 Pixel Breite und damit auf vier Spalten. margin-inline: auto setzt das begrenzte Raster in die Mitte.

Bilder in der richtigen Auflösung ausliefern

Ein großer Bildschirm zeigt ein Bild oft auch in einer größeren Fläche an, wofür eine höher aufgelöste Bilddatei nötig ist. Die Attribute srcset und sizes am img-Element überlassen dem Browser die Wahl der passenden Datei, statt eine einzige Auflösung für alle Bildschirme auszuliefern.

<img
  src="hero-1200.jpg"
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w, hero-3200.jpg 3200w"
  sizes="(min-width: 1800px) 1600px, 100vw"
  alt="Redaktionsteam im Newsroom"
>

Der Browser lädt die 3200 Pixel breite Datei nur, wenn Bildschirmbreite und Pixeldichte sie auch benötigen. Auf einem kleineren Bildschirm bleibt die 800-Pixel-Datei die richtige Wahl und spart Datenvolumen. Die Anleitung zu responsiven Bildern bei MDN beschreibt die Auswahl in vier Schritten:

1. Der Browser prüft Bildschirmgröße, Pixeldichte, Zoomstufe, Ausrichtung und Netzwerkgeschwindigkeit.
2. Er sucht in sizes die erste Medienbedingung, die zutrifft.
3. Er liest die Slot-Breite ab, die zu dieser Bedingung gehört, also die Fläche, die das Bild auf der Seite einnehmen wird.
4. Er lädt aus srcset die Datei, die genau zur Slot-Breite passt, oder sonst die erste größere, und skaliert sie auf den Slot herunter.

Ein Ultrawide-Monitor mit 3440×1440 Pixeln und 100 Prozent Skalierung erfüllt die Bedingung (min-width: 1800px). Der Slot ist 1600 Pixel breit, und der Browser lädt hero-1600.jpg. Ein Monitor mit 5120×2880 Pixeln bei 200 Prozent Skalierung zeigt 2560 CSS-Pixel Breite und erfüllt dieselbe Bedingung, braucht für den 1600 Pixel breiten Slot wegen der doppelten Pixeldichte aber 3200 Bildpunkte und bekommt hero-3200.jpg.

Höhenangaben, die zur sichtbaren Fläche passen

Die klassische Einheit vh misst die volle Höhe des Ansichtsfensters, auch den Teil, den ein mobiler Browser hinter seiner eigenen Adressleiste versteckt. Seit Chrome 108, Safari 15.4 und Firefox 101 stehen dafür die dynamischen Einheiten dvh, svh und lvh zur Verfügung. Mit Edge 108 unterstützen Chrome, Edge, Firefox und Safari sie seit dem 5. Dezember 2022, und seit Juni 2025 gelten sie als in allen gängigen Browsern verfügbar: Die Baseline-Einstufung führt sie seit dem 5. Juni 2025 als Widely available, weil seit der vollständigen Unterstützung 30 Monate vergangen sind. 100dvh entspricht immer der aktuell sichtbaren Höhe, unabhängig davon, ob die Adressleiste gerade ein- oder ausgeblendet ist.

.hero {
  min-height: 100dvh;
}

Auf einem Widescreen-Desktop-Monitor ohne mobile Adressleiste liefert dvh dasselbe Ergebnis wie vh. Der Unterschied zahlt sich auf Tablets und Smartphones aus, deren Browser die Adressleiste beim Scrollen ein- und ausblenden. Dort gehört die Wahl der Höheneinheit zum Mobile-First-Design, bei dem ein Layout zuerst für den kleinen Bildschirm entsteht. Auf einem Ultrawide-Monitor ist dagegen die Höhe die knappe Größe: 1440 Pixeln Höhe stehen 3440 Pixel Breite gegenüber, und ein Einstiegsbereich mit min-height: 100dvh belegt dort die komplette sichtbare Höhe des Fensters.

Mit welcher Media Query gelten Regeln nur in Ultrawide-Fenstern?

Die Media Query (min-aspect-ratio: 7/3) greift nur, wenn das Browserfenster mindestens 2,33-mal so breit wie hoch ist. Ein Fenster im Vollbild auf einem 21:9-Monitor erfüllt das mit 2,37:1 oder 2,39:1, eines auf einem 16:9-Monitor mit 1,78:1 nicht. Das Merkmal aspect-ratio läuft laut MDN seit Juli 2015 in Chrome, Edge, Firefox und Safari.

@media (min-aspect-ratio: 7/3) and (min-width: 2400px) {
  .page {
    max-inline-size: 110rem;
    margin-inline: auto;
  }
}

/* gleichwertig in der Bereichsschreibweise */
@media (aspect-ratio >= 7/3) and (width >= 2400px) {
  .page {
    max-inline-size: 110rem;
    margin-inline: auto;
  }
}

Das Seitenverhältnis bezieht sich auf das Browserfenster, nicht auf den Monitor. Tab- und Adressleiste sowie die Taskleiste nehmen Höhe weg, deshalb hat die Anzeigefläche eines maximierten Fensters ein breiteres Seitenverhältnis als der Bildschirm selbst. Ein maximiertes Fenster auf einem 1920×1080-Monitor bleibt unter 7/3, solange Browser- und Taskleiste zusammen weniger als 257 Pixel Höhe belegen. Die zweite Bedingung (min-width: 2400px) verhindert, dass ein kleines, flaches Fenster auf einem normalen Bildschirm die Ultrawide-Regeln auslöst.

• Die Schreibweise mit min-aspect-ratio läuft seit Juli 2015 in allen vier großen Browsern.
• Die Bereichsschreibweise mit >= unterstützen alle vier seit Safari 16.4 vom 27. März 2023.
• Beide Schreibweisen reagieren sofort, wenn jemand das Fenster verkleinert oder auf einen anderen Monitor zieht.

Keine dieser Techniken ersetzt eine Entscheidung, die am Anfang jedes Layouts steht: Welche Elemente sollen mit der Bildschirmbreite mitwachsen, und welche sollen eine feste Obergrenze behalten? clamp(), Container Queries und automatische Rasterspalten setzen diese Entscheidung um, sie treffen sie nicht.

Seit wann laufen Container Queries, clamp() und dvh in allen Browsern?

Container Queries, clamp(), die dynamischen Viewport-Einheiten wie dvh, srcset, CSS Grid und das Media-Query-Merkmal aspect-ratio samt Bereichsschreibweise laufen im September 2026 in den aktuellen Versionen von Chrome, Edge, Firefox und Safari. Die jüngste darunter ist die Bereichsschreibweise für Media Queries: Sie gilt seit dem 27. September 2025 als Baseline Widely available, also 30 Monate nachdem der letzte dieser vier Browser sie unterstützt hat.

Die Daten stammen aus Web Platform Status (webstatus.dev), das die Browserdaten des Projekts web-features der WebDX Community Group auswertet, Stand 13. September 2026. Kernbrowser sind dort Chrome, Edge, Firefox und Safari, jeweils auf Desktop und Mobilgerät. Die Spalte Widely available liegt immer 30 Monate hinter der Spalte davor.

Achtung: Auch bei Widely available nutzen nicht alle Besucher eine passende Browserversion. Wer Firmenrechner mit lange nicht aktualisierten Browsern bedient, prüft vor dem Verzicht auf eine Ersatzregel die eigene Zugriffsstatistik.

Häufig gestellte Fragen zu CSS für Ultrawide-Monitore

Seit wann gelten Container Queries als in allen gängigen Browsern einsetzbar?

Chrome und Safari unterstützen Container Queries seit September 2022 mit Chrome 105 und Safari 16. Firefox zog im Februar 2023 mit Version 110 nach. Seitdem lassen sich Container Queries in Produktionscode einsetzen, ohne einen großen Teil der Besucher auszuschließen. Seit dem 14. August 2025 führt die Baseline-Einstufung der WebDX Community Group Container Queries als Widely available, weil alle Kernbrowser sie dann seit 30 Monaten unterstützen.

Welche Auflösung hat ein Ultrawide-Monitor?

Ein Ultrawide-Monitor mit der Handelsangabe 21:9 hat zum Beispiel 3440×1440 oder 2560×1080 Pixel, rechnerisch sind das 2,39:1 und 2,37:1. Super-Ultrawide-Monitore mit der Angabe 32:9 haben zum Beispiel 5120×1440 Pixel. In der Steam-Hardware-Umfrage vom August 2026 nutzten 3,14 Prozent der erfassten Rechner einen Hauptbildschirm mit 3440×1440 Pixeln, 0,67 Prozent einen mit 2560×1080 Pixeln und 0,41 Prozent einen mit 5120×1440 Pixeln.

Wie breit sollte eine Textspalte auf einem Widescreen-Monitor höchstens sein?

Eine Textspalte auf einem Widescreen-Monitor sollte höchstens 80 Zeichen je Zeile fassen. Diese Grenze nennt das Erfolgskriterium 1.4.8 der WCAG 2.2, der Barrierefreiheitsrichtlinien des W3C, für die Konformitätsstufe AAA. In CSS begrenzt max-inline-size mit der Einheit ch die Spalte, wobei 1ch der Breite der Ziffer 0 entspricht und deshalb nur ungefähr einem Zeichen.

Was unterscheidet die Einheit dvh von der klassischen Einheit vh?

vh misst die volle Höhe des Ansichtsfensters, auch den Teil, den ein mobiler Browser hinter seiner Adressleiste versteckt. dvh entspricht dagegen immer der aktuell sichtbaren Höhe, unabhängig davon, ob die Adressleiste gerade ein- oder ausgeblendet ist. Auf einem Desktop-Monitor ohne mobile Adressleiste liefern beide Einheiten dasselbe Ergebnis.

Wie verhindert clamp() eine überdimensionierte Überschrift auf einem Ultrawide-Monitor?

clamp() nimmt einen bevorzugten Wert, der mit der Ansichtsfensterbreite mitwächst, begrenzt ihn aber durch eine feste Unter- und Obergrenze. Eine Überschrift bleibt dadurch auf einem Smartphone lesbar groß, wächst auf einem Laptop moderat mit und stoppt auf einem Ultrawide-Monitor an der definierten Obergrenze. Mit clamp(1.75rem, 1.1rem + 2vw, 3.25rem) erreicht eine Überschrift ab 1720 Pixeln Fensterbreite ihre Obergrenze von 52 Pixeln und bleibt auch auf einem 3440 Pixel breiten Monitor dabei.

Warum reicht eine einzige Bilddatei nicht für alle Bildschirmgrößen?

Ein großer Bildschirm zeigt ein Bild oft in einer größeren Fläche an und braucht dafür eine höher aufgelöste Datei, während dieselbe Datei auf einem kleinen Bildschirm nur unnötig Datenvolumen verbraucht. Die Attribute srcset und sizes am img-Element überlassen dem Browser die Wahl der passenden Datei aus mehreren angebotenen Auflösungen.