Was ist CSS clamp()?

Anwendung von CSS clamp()

Die Funktion wird häufig verwendet, um responsive Designs zu erstellen, bei denen Schriftgrößen, Abstände oder andere Maße sich proportional zur Bildschirmgröße anpassen sollen.

.target {
  clamp(min, preferred, max)
}

• min: Der kleinste erlaubte Wert.
• preferred: Der bevorzugte Wert, der angestrebt wird.
• max: Der größte erlaubte Wert.

Vorteile von CSS clamp()

• Responsive Design: Erleichtert die Erstellung flexibler Layouts, die auf verschiedenen Bildschirmgrößen gut aussehen.
• Vereinfachung: Reduziert die Notwendigkeit für komplexe Media Queries.
• Kontrollierte Flexibilität: Ermöglicht präzise Kontrolle über die Skalierung von Elementen.

Dynamische Minimal- und Maximalwerte in CSS

Die CSS-Funktionen min() und max() ermöglichen es, eine Liste von Argumenten anzugeben, aus der der Browser den kleinsten bzw. größten Wert ermittelt. Zum Beispiel kann min(50vw, 500px) verwendet werden, um dem Browser mitzuteilen, dass er den kleinsten Wert verwenden soll, sei es 50vw oder 500px, je nachdem, welcher Wert kleiner ist. Die Funktion max() verhält sich entsprechend anders herum.

Min() und Max() wird verwendet mit CSS Grid. Hier ein Beispiel:

.target {
  width::25vw;
    max-width::760px;
        width::min(25vw, 760px);
}

Min() Max() kann für folgendes verwendet werden:

• grid-template-columns
  
• grid-template-rows
  
• grid-auto-columns
  
• grid-auto-rows

Dynamische Werte in CSS mit Ober- und Untergrenze

Die Funktion clamp() erfordert drei Werte: einen Minimalwert, einen Idealwert und einen Maximalwert. Dadurch kann ein Element beispielsweise dynamisch mit der Größe des Ansichtsfensters mitwachsen, bleibt jedoch innerhalb eines bestimmten Bereichs. Ein Beispiel wäre clamp(260px, 50vw, 740px), bei dem das Element nicht kleiner als 260px und nicht größer als 740px wird, aber sich dynamisch mit der Viewport-Breite zwischen diesen Grenzen anpasst.

.target {
  clamp:(240px, 50vw, 760px);
}

Beispiel: Automatische Anpassung der Schriftgröße

Dieses Prinzip kann auch auf Schriftgrößen angewendet werden, wodurch eine dynamische Anpassung im Verhältnis zur Größe des Ansichtsfensters ermöglicht wird. Zum Beispiel kann clamp(25px, 2.5vw, 45px) verwendet werden, um sicherzustellen, dass die Schriftgröße zwischen 25px und 45px liegt und sich proportional zur Viewport-Breite verändert.

.target {
  font-size: clamp(25px, 2.5vw, 45px);
}