min(), max() und clamp(): drei CSS-Funktionen für dynamischere Websites

Von: Jonas, Robert, Konstantin

Mit den CSS-Funktionen min(), max(), und clamp() können Websites dynamischer und responsiver gemacht werden. Flüssige Übergänge bei Größen, Abständen und Typografie können damit umgesetzt werden.

Aktualisiert von 2021 – 2023 3 Kommentare

Die drei CSS-Funktionen min(),  max(), und clamp() helfen euch, Websites dynamischer und responsiver zu machen, da sich damit flüssige Übergänge bei Größen, Abständen und Typografie umsetzen lassen. Außerdem machen sie den Code schlanker, was ihn lesbarer und wartungsfreundlicher macht.

Dynamische Minimal- und Maximalwerte in CSS

Bei min() und max() wird eine Liste von Argumente angegeben und der Browser ermittelt, welcher dieser Werte der kleinste bzw. größte ist.

.element {
   width: 50vw;
   max-width: 500px;

   /* kann auch so geschrieben werden */
   width: min(50vw, 500px);
}

Im Fall von min(50vw, 500px) verwendet der Browser den kleinsten Wert. Ist der Viewport also weniger als 1000 Pixel breit, greift die Angabe 50vw, da diese dann mit Sicherheit kleiner als 500 Pixel ist; über einer Viewportbreite von 1000 Pixel wird 50vw größer als 500px, weshalb der Browser dann diese Angabe verwendet. Die Funktion max() verhält sich entsprechend anders herum.

Dynamische Werte in CSS mit Ober- und Untergrenze

Bei der Verwendung von clamp() müssen drei Werte angegeben werden: ein Minimalwert, ein Idealwert (von dem aus berechnet werden soll) und ein Maximalwert.

Dies ermöglicht es beispielsweise, dass ein Element dynamisch mit der Größe des Ansichtsfensters mitwächst (50vw), dabei aber nicht kleiner als ein Mindestwert (250px) oder größer als ein Höchstwert (750px) wird.

.element {
   width: clamp(250px, 50vw, 750px);
}

Beispiel: Automatische Anpassung der Schriftgröße

Das Prinzip funktioniert auch für Schriftgrößen und modernisiert damit bestehende Techniken wie die Berechnung fließender Schriftgrößen mittels calc() oder die Größenanpassung der Schrift mit Hilfe von vw.

Die Schriftgröße verhält sich im folgenden Beispiel dynamisch im Verhältnis zur Größe des Ansichtsfensters (2.5vw), bleibt aber innerhalb der angegebenen Grenzen.

.element {
   font-size: clamp(1rem, 2.5vw, 2rem);
}

Beispiel anschauen

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Robert Menzel

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause. Zu seinen Aufgaben gehören die visuelle Gestaltung und die technische Umsetzung von Websites, eCommerce-Shops oder dessen Kombination. Besonders gerne übernimmt er die Entwicklung individueller und anspruchsvoller Websites mit umfangreichen ineinandergreifenden Funktionen, getreu dem Motto: »Der beste Lack bringt nichts, wenn die Maschine darunter nicht läuft.«

Konstantin Hanke

Konstantin arbeitet als Webentwickler bei kulturbanause. Seine Hauptaufgabe ist die technische Umsetzung von klaren, soliden und effizienten Webauftritten und Website-Komponenten. Darüber hinaus kümmert er sich um die Wartung, Optimierung und Weiterentwicklung von bestehenden Websites. Sein besonderes Interesse gilt der Idee von quelloffener, freier Software.