kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

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.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

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 Font-Size 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);
}

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.