Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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 Konstantin Hanke

thumb

Konstantin arbeitet als Webentwickler bei kulturbanause®. Seine Aufgabe 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 freier Software.

Feedback & Ergänzungen – 2 Kommentare

  1. Carsten
    schrieb am 06.06.2021 um 13:58 Uhr:

    Prima Artikel!
    Anschaulich und verständlich.
    Würde gerne die clamp-Funktion nutzen, aber nur wenn diese vom Browser unterstützt wird.
    Wie lautet denn die @Support-Regel hierfür?

    Antworten
  2. Sabine
    schrieb am 04.06.2021 um 13:04 Uhr:

    Nach meiner Erfahrung ist es besser, die mittleren Wert berechnen zu lassen.
    Beispielsweise so:

    p {
    font-size: clamp(1rem, calc(12px + 0.5vw), 1.25rem);
    }

    p {
    font-size: clamp(var(–fluid-type-min, 1rem), calc(1rem + var(–fluid-type-target, 3vw)), var(–fluid-type-max, 3rem));
    }

    Was ist eure Meinung dazu?

    Antworten

Schreibe einen Kommentar zu Sabine Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →