Fluide Skalierung

Übersicht

Mit der fluiden Skalierung können Komponenten ihre internen Proportionen (z. B. Schriftgrößen und Abstände) an ihre aktuellen Abmessungen anpassen. So entsteht ein einheitlicheres Design, als wenn man zwischen festen Haltepunkten hin- und herspringt.

Früher wurde die fluide Skalierung mit Viewport-Einheiten (Skalierung basierend auf der Bildschirmgröße) erreicht. Mit modernen Containerabfrageeinheiten können Komponenten stattdessen relativ zu ihrem übergeordneten Container skaliert werden. So sehen Komponenten unabhängig von ihrer Platzierung im Layout gut aus, was die Isolation und Wiederverwendbarkeit von Komponenten verbessert.

Implementierung

1. Container definieren

Wenn Sie Containerabfrageeinheiten verwenden möchten, müssen Sie zuerst einen Containment-Kontext für ein übergeordnetes Element definieren.

.component-wrapper {
  /* Define the container type. Use 'inline-size' for width-based scaling. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
  
  /* Optional: Name the container for specific targeting */
  container-name: fluid-card;
}

2. Containerabfrageeinheiten verwenden

Verwenden Sie Containerabfrageeinheiten (cqi, cqb usw.), um Größen relativ zu den Abmessungen des Containers festzulegen.

• cqi: 1 % der Inline-Größe des Containers (Breite in horizontalen Schreibmodi).
• cqb: 1 % der Blockgröße des Containers (Höhe in horizontalen Schreibmodi).

Hinweis: Container-Einheiten können direkt in jeder Property verwendet werden, ohne dass eine @container-Abfrageregel erforderlich ist. Sie werden automatisch anhand des nächstgelegenen Ancestors mit einem definierten container-type aufgelöst.

.component-title {
  /* Scale font size based on container width */
  /* 10cqi means 10% of the container's width */
  font-size: 10cqi;
}

.component-body {
  /* Scale padding based on container width */
  padding: 5cqi;
}

3. Werte mit clamp() einschränken

Damit die Größen nicht zu klein oder zu groß werden, verwenden Sie die CSS-Funktion clamp(). Dies wirkt sich auf die Möglichkeit des Nutzers aus, zu zoomen oder die Standardschriftgröße anzupassen. Damit der Text den Richtlinien zur Barrierefreiheit im Internet entspricht, darf die maximale Größe nicht mehr als das 2,5-Fache der Mindestgröße betragen.

.component-title {
  /* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
  font-size: clamp(1rem, 5cqi, 2.5rem);
}

Fallback-Strategien

Wenn Containerabfragen vom Browser nicht unterstützt werden, sollten Sie einen Fallback mit Darstellungsbereichseinheiten oder Standardmedienabfragen bereitstellen.

.component-title {
  /* Fallback for browsers that do not support container units */
  font-size: clamp(1rem, 5vw, 2.5rem);
}

@supports (font-size: 1cqi) {
  .component-title {
    /* Use container units where supported */
    font-size: clamp(1rem, 5cqi, 2.5rem);
  }
}

Durch diesen Fallback wird sichergestellt, dass der Text weiterhin skaliert wird, allerdings basierend auf der Bildschirmbreite und nicht auf der Breite der Komponente. Sie sollten testen, ob dies in Ihrem Anwendungsfall funktioniert.