jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-Tools

Kostenlose Container Query Units Rechner

Berechne clamp()-Werte mit Container-Query-Einheiten für komponentenbezogene responsive Größen.

Tool wird geladen...

Was ist Container Query Units Rechner?

Container-Query-Einheiten funktionieren wie Viewport-Einheiten, sind aber relativ zu einem Query-Container statt zum Viewport. cqi entspricht 1% der Inline-Grösse des Containers, cqw ist 1% der Containerbreite, cqb ist 1% der Blockgröße des Containers, cqmin und cqmin sind das Minimum/Maximum von cqi und cqb. Sie ermöglichen komponentenbezogene responsive Grössenanpassung, bei der sich eine Komponente an ihren Container anpasst, nicht an das Browserfenster.

Kurze Antwort

Verwenden Sie Container-Query-Einheiten (cqi, cqw, cqb, cqmin, cqmax) mit clamp() für komponentenbezogene responsive Grössenanpassung. Sie funktionieren wie Viewport-Einheiten, skalieren aber mit der Breite des übergeordneten Containers. Setzen Sie container-type: inline-size auf das übergeordnete Element und verwenden Sie den clamp()-Ausdruck in den Kind-Styles.

Last updated: 2026-05-28

Einschränkungen

  • Container-Query-Einheiten erfordern, dass container-type auf einem Vorfahren gesetzt ist. Ohne einen etablierten Container-Kontext fallen sie auf viewportrelatives Verhalten zurück, was Werte weit größer als beabsichtigt produzieren kann.
  • Die Browserunterstützung für Container-Query-Einheiten entspricht der Container-Query-Unterstützung: Chrome 105+, Firefox 110+, Safari 16+, Edge 105+. Ältere Browser erkennen diese Einheiten überhaupt nicht.
  • Wenn mehrere Container-Vorfahren existieren, wird der nächste Vorfahr mit container-type verwendet. Dies kann zu unerwartetem Verhalten führen, wenn eine tief verschachtelte Komponente versehentlich einen näheren Container referenziert.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Geben Sie die minimale und maximale Zielgröße für Ihre CSS-Eigenschaft in Pixeln ein.
  2. Legen Sie den Containerbreitenbereich fest —die minimale Containerbreite, bei der die Eigenschaft ihr Minimum erreicht, und die maximale Breite, bei der sie ihr Maximum erreicht.
  3. Wählen Sie eine Container-Query-Einheit und den CSS-Eigenschaftsnamen.
  4. Kopieren Sie den clamp()-Ausdruck und stellen Sie sicher, dass das übergeordnete Element container-type: inline-size hat.

Wofür du es nutzen kannst

  • Die Schriftgröße einer Kartenüberschrift mit der Kartenbreite statt der Viewportbreite skalieren lassen.
  • Einen Komponentenabstand schaffen, der sich an den verfügbaren Containerplatz anpasst.
  • Dashboard-Widgets erstellen, bei denen jedes Element proportional zum Widget-Container skaliert.

Anwendungsfalle

Praxisbeispiele

Beispiel

Kartentitel-Skalierung mit Container

Eine Kartenkomponente soll eine Schriftgröße von 16px bei 320px Containerbreite und 32px bei 800px haben. Verwenden Sie cqi, um den Titel mit dem Kartencontainer zu skalieren, sodass dieselbe Komponente in einer schmalen Seitenleiste und einer breiten Hauptspalte funktioniert.

Beispiel

Responsiver Komponentenabstand

Eine Callout-Box soll 16px Abstand bei 300px Containerbreite und 40px Abstand bei 1000px haben. Verwenden Sie den Rechner mit cqi und kopieren Sie den clamp()-Ausdruck für die padding-Eigenschaft.

Haufige Fehler

  • Container-Query-Einheiten verwenden, ohne container-type auf einem übergeordneten Element zu setzen —der Browser verwendet den ursprünglichen enthaltenden Block (Viewport), was den Zweck zunichte macht.
  • Erwarten, dass Container-Query-Einheiten wie Viewport-Einheiten funktionieren —sie sind relativ zum nächsten Query-Container-Vorfahren, der eine ganz andere Grösse als der Viewport haben kann.
  • Container-Query-Einheiten in einer tief verschachtelten Komponente verwenden, bei der der nächste Container nicht der beabsichtigte Grössenbezug ist.

Überprüfung

  1. Testen Sie die Komponente bei verschiedenen Containerbreiten, indem Sie das übergeordnete Element (nicht den Viewport) in der Grösse ändern und überprüfen, ob die Eigenschaft korrekt skaliert.
  2. Überprüfen Sie im Browser-DevTools-Computed-Bereich, ob der clamp()-Ausdruck bei bekannten Containerbreiten den erwarteten Pixelwert ergibt.

FAQ

Fragen zu Container Query Units Rechner

Was ist der Unterschied zwischen cqi und cqw?

cqi ist 1% der Inline-Grösse des Containers —in horizontalen Schreibmodi entspricht dies der Containerbreite. cqw ist immer 1% der Containerbreite, unabhängig vom Schreibmodus. Für die meisten lateinisch-schriftlichen Seiten sind sie identisch. Für vertikale Schreibmodi oder RTL-Seiten passt sich cqi der Schreibrichtung an.

Funktionieren Container-Query-Einheiten ohne @container-Queries?

Ja. Container-Query-Einheiten funktionieren, sobald ein übergeordnetes Element container-type gesetzt hat. Sie benötigen keine @container-Query-Regel, um die Einheiten zu verwenden. Setzen Sie einfach container-type: inline-size auf ein übergeordnetes Element und verwenden Sie cqi/cqw/cqb überall in den Nachkommen-Styles.

Was passiert, wenn kein Container-Vorfahre existiert?

Der Browser fällt auf den ursprünglichen enthaltenden Block zurück —den Viewport. Dies bedeutet, dass sich ein clamp()-Ausdruck mit cqi wie vw (Viewportbreite) verhält, wenn kein Container-Kontext gefunden wird. Dieser Fallback kann bei breiten Viewports unerwartet große Werte produzieren. Stellen Sie daher immer einen Container-Vorfahren sicher.

Verwandte Tools

Weitere css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Tool öffnen

Auch ausprobieren

Auch ausprobieren