CSS Academy · Lektion

Container Queries vs. Media Queries

Verstehen Sie, wann Sie für komponentenbasiertes Design Container Queries statt viewportbasierter Media Queries verwenden.

Container Queries vs. Media Queries ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Der grundlegende Unterschied

Media-Queries reagieren auf die Abmessungen des Viewports. Container-Queries reagieren auf die Abmessungen des übergeordneten Containers. Diese Unterscheidung bestimmt, welches Werkzeug Sie für welches Problem verwenden sollten.

Media-Queries: Wann Sie sie verwenden sollten

Verwenden Sie Media-Queries für:

globale Änderungen am Seitenlayout (eine oder zwei Spalten)
das Ein- und Ausblenden großer Seitenbereiche (Navigationsleiste auf Mobilgeräten)
die Skalierung der Typografie-Basis auf Seitenebene
Druckstile
Abfragen von Benutzereinstellungen (dunkler Modus, reduzierte Bewegung)

Container-Queries: Wann Sie sie verwenden sollten

Verwenden Sie Container-Queries für:

Layoutänderungen auf Komponentenebene (Karte horizontal oder vertikal)
Komponenten in unbekannten Containern (Seitenleiste, Hauptbereich, Seitenleiste innerhalb des Hauptbereichs)
wiederverwendbare Komponenten eines Designsystems
Widgets, die in Seiten Dritter eingebettet sind

Das Argument der Portabilität

Eine mit Media-Queries formatierte Karte funktioniert bei einem Breakpoint auf einer 1200px breiten Seite. Wird diese Karte in eine Seitenleiste verschoben, benötigt sie möglicherweise andere Breakpoints. Mit Container-Queries funktioniert dieselbe Karte einfach — sie passt sich an den verfügbaren Platz an.

Kombinierte Verwendung

In realen Anwendungen werden beide eingesetzt. Media-Queries definieren das Makro-Layout (die Seitenleiste ist ab Desktop-Breiten vorhanden); Container-Queries definieren das Verhalten der Komponenten innerhalb dieses Layouts.

<div class="layout">
  <div class="sidebar"><div class="card">Sidebar card</div></div>
  <div class="main-content"><div class="card">Main card</div></div>
</div>

Spezifität von Container-Queries

Im Gegensatz zu Media-Queries (die keine Spezifität hinzufügen) fügen Container-Queries eine kontextspezifische Spezifität hinzu. Eine Regel innerhalb von @container (min-width: 400px) hat dieselbe Spezifität wie dieselbe Regel außerhalb — sie gilt jedoch nur innerhalb dieses Container-Kontexts.

Browserunterstützung

Container-Queries werden seit 2023 von allen modernen Browsern unterstützt (Chrome 105+, Firefox 110+, Safari 16+). Für neue Projekte können Sie sie heute ohne Fallbacks für moderne Browser-Zielplattformen verwenden.

Progressive Verbesserung mit @supports

Verwenden Sie für Projekte, die ältere Browser unterstützen müssen, @supports, um die Unterstützung von Container-Queries zu prüfen:

<div class="card-wrapper"><div class="card">Progressively enhanced card</div></div>

Leistungsvergleich

Container-Queries haben eigene Leistungsmerkmale: Jedes Element mit container-type erzeugt eine Grenze für Layout-Containment. Dadurch wird verhindert, dass Größenänderungen innerhalb den Außenbereich beeinflussen — was tatsächlich ein Leistungsvorteil ist. Änderungen durch Media-Queries können globale Neuberechnungen des Layouts auslösen.

Container-Queries debuggen

Chrome DevTools zeigt im Elements-Panel neben Container-Elementen ein „cq“-Abzeichen an. Klicken Sie darauf, um die Containergrenzen zu visualisieren und die Bedingungen von Container-Queries mit dem Layout-Inspektor von DevTools zu testen.

Kurzer Test

Eine Kartenkomponente eines Designsystems muss abhängig von der verfügbaren Breite in jedem Kontext von einem gestapelten Layout zu einem nebeneinander angeordneten Layout wechseln. Welcher Ansatz ist besser?

Zusammenfassung

Media-Queries reagieren auf den globalen Viewport; Container-Queries reagieren auf die Größe eines übergeordneten Containers. Verwenden Sie Media-Queries für globale Layoutentscheidungen und Abfragen von Benutzereinstellungen. Verwenden Sie Container-Queries für wiederverwendbare Komponenten, die sich an ihren Kontext anpassen müssen. Kombinieren Sie beide: Media-Queries für das Makro-Layout der Seite, Container-Queries für die Anpassung der Komponenten innerhalb dieses Layouts.

Häufig gestellte Fragen

Ist die Lektion „Container Queries vs. Media Queries“ kostenlos?

Ja — der vollständige Text von „Container Queries vs. Media Queries“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Container Queries vs. Media Queries“?

Verstehen Sie, wann Sie für komponentenbasiertes Design Container Queries statt viewportbasierter Media Queries verwenden. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Container Queries vs. Media Queries“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy