CSS Academy · Lektion

Container-Query-Einheiten: cqw cqh

Legen Sie die Größe von Elementen relativ zu ihrem Container für Container Queries mit cqw, cqh und verwandten Container-Einheiten fest.

Container-Query-Einheiten: cqw cqh ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Container-Query-Einheiten

CSS stellt containerrelative Einheiten bereit, mit denen Werte als Prozentsätze der Abmessungen des Query-Containers festgelegt werden — ähnlich wie Viewport-Einheiten (vw/vh), aber relativ zum Container der Komponente.

cqw — Breite des Query-Containers

1cqw = 1 % der Inline-Größe des Containers (Breite bei horizontaler Schreibrichtung). Skalieren Sie Typografie und Abstände relativ zum Container der Komponente.

<div class="card-wrapper"><h3 class="card-title">Fluid Card Title</h3></div>

cqh — Höhe des Query-Containers

1cqh = 1 % der Block-Größe des Containers (Höhe). Erfordert container-type: size (nicht nur inline-size).

<div class="hero-wrapper"><div class="hero-card">Hero Text</div></div>

cqi — Inline-Größe des Containers

cqi ist bei horizontaler Schreibrichtung ein Alias für cqw und bezieht sich ausdrücklich auf die Inline-Dimension (ist also nicht an die horizontale Richtung gebunden).

cqb — Block-Größe des Containers

cqb entspricht cqh, ist aber dimensionsbezogen und bezieht sich unabhängig von der Schreibrichtung auf die Block-Größe.

cqmin und cqmax

cqmin = 1 % der kleineren Containerdimension. cqmax = 1 % der größeren Containerdimension. Entspricht vmin/vmax.

<div class="icon-wrapper"><div class="icon"></div></div>

Fließende Typografie in Komponenten

Mit Container-Einheiten wird wirklich komponentenbezogene fließende Typografie möglich:

<div class="card-wrapper"><h3 class="card-title">Fluid Title</h3></div>

Wann Sie Container-Einheiten verwenden sollten

Verwenden Sie Container-Einheiten, wenn:

der Text einer Komponente mit ihrer Breite skalieren soll
die Abstände innerhalb einer Komponente proportional zu ihrer Größe sein sollen
Sie ein von der Viewport-Größe unabhängiges fließendes Design auf Komponentenebene wünschen

Container-Einheiten im Vergleich zu Viewport-Einheiten

Der entscheidende Unterschied: Viewport-Einheiten (vw, vh) beziehen sich auf den Browser-Viewport. Container-Einheiten (cqw, cqh) beziehen sich auf den nächsten Query-Container. Dadurch sind Komponenten wirklich portabel — dieselbe Komponente sieht sowohl in einer 300px breiten Seitenleiste als auch in einem 900px breiten Hauptbereich proportional korrekt aus.

Erforderlich: container-type

Container-Einheiten funktionieren nur, wenn ein Vorfahre über container-type verfügt. Ohne einen solchen Vorfahren fällt die Container-Query-Einheit auf die Small-Viewport-Einheit (svw/svh) zurück.

Praktisches Muster

Eine vollständige Komponente mit Container-Einheiten:

<div class="feature">
  <h2 class="feature-title">Feature Name</h2>
  <p class="feature-text">A short description of this feature that scales with the container.</p>
</div>

Kurzer Test

Welche Schriftgröße ergibt font-size: 5cqw in einer Komponente innerhalb eines 400px breiten Containers?

Zusammenfassung

Container-Query-Einheiten (cqw, cqh, cqi, cqb, cqmin, cqmax) legen Werte relativ zum Query-Container statt zum Viewport fest. Verwenden Sie cqw für fließende Typografie, die mit der Breite der Komponente skaliert. Für ihre Funktion ist ein Vorfahre mit container-type erforderlich — ohne einen solchen Vorfahren fallen sie auf Viewport-Einheiten zurück.

Häufig gestellte Fragen

Ist die Lektion „Container-Query-Einheiten: cqw cqh“ kostenlos?

Ja — der vollständige Text von „Container-Query-Einheiten: cqw cqh“ 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-Query-Einheiten: cqw cqh“?

Legen Sie die Größe von Elementen relativ zu ihrem Container für Container Queries mit cqw, cqh und verwandten Container-Einheiten fest. 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 3 von 4.

Wie lange dauert die Lektion „Container-Query-Einheiten: cqw cqh“?

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