CSS clamp, min und max – Wertebereich einschränken
Die CSS-Funktion clamp() beschränkt den Wert für eine Eigenschaft zwischen einem Minimum und einem Maximum. clamp mit min() und max() bringt mehr Flexibilität anstelle von sichtbaren Sprüngen an Bruchstellen – Breakpoints –, und erlaubt komplexe responsive Layouts.
min() – minimaler Wert
Die min()-Funktion kann überall eingesetzt werden, wo ein Wert für eine Größe steht. min erwartet eine komma-getrennte Liste von Werten, aus der sich der Browser den jeweils kleinsten Wert aussucht, der für die aktuelle Situation passt.
one night sailed off in a wooden shoe sailed on a river of misty light into a sea of dew! Where are you going and what do you wish the old moon asked the three.
┌─▶ 1rem Abstand rechts und links
.container { │
width: min(100% - 2rem, 680px);
margin-inline: auto;
│
Block zentrieren ◀─┘
}
- 100% - 2rem sorgt für 1rem Abstand links und rechts,
- min(...) verhindert, dass der Block breiter als 680px wird,
- margin-inline: auto zentriert den Block horizontal.
max() – maximaler Wert
Die CSS-Funktion max macht genau das Gegenteil von min. 50vw entspricht 50% der Viewport-Breite. 20ch ist die minimale Breite der Box. Mit einem größeren Viewport erreicht die Box ihre maximale Breite von 30vw.
one night sailed off in a wooden shoe sailed on a river of misty light into a sea of dew! Where are you going and what do you wish the old moon asked the three.
width: max(30vw, 30ch);
min setzt also eine Obergrenze, max begrenzt nach unten. min verhindert, dass Elemente zu groß werden, max gibt eine größere Flexibilität bei den ganz großen Viewports.
clamp() – mitwachsen zwischen Minimum und Maximum
clamp ist im wörtlichen Sinne die Klammer für eine minimalen und einen maximalen Wert und einen bevorzugten Wert in der Mitte. Die CSS-Funktion wird bevorzugt für die Schriftgröße eingesetzt, aber beschränkt ebenfalls die Eigenschaften
- width, height
- padding, margin
- gap
- border-radius
Zuvor war das responsive Webdesign darauf angewiesen, Schriftgröße, Zeilenhöhe und Zeichenabstand mittels Media Queries an bestimmten Breakpoints zu ändern.
Bilder und Text nehmen i.d.R. auf kleinen Monitoren meist die vollständige Breite des Viewports ein. Dort ist der Einsatz von font-size: clamp() mit einer minimalen, einer bevorzugten und einer maximalen Größe einfach durch Angaben wie 3vw.
bevorzugter Wert ─┐
h2 { ▼
font-size: clamp(1.25rem, 3vw, 3rem);
} ▲ ▲
│ │
Untergrenze ┘ Obergrenze
oder
Optimum (bevorzugt) ─┐
│
elem { ▼
width: clamp(200px, 50vw, 800px);
} ▲ ▲
│ │
Miniumn ┘ Maximum
(nie breiter als 800px)
Aber hier einfach 3vw als bevorzugten Wert einzusetzen, ist alles andere als ideal. In vielen Fällen muss in die Angaben einbezogen werden, wo das die Anpassung der Schriftgröße anfängt wo die Anpassung aufhört – der flexible Bereich zwischen minimaler und maximaler Breite der Box.
font-size: clamp() online berechnen
Der Clou von clamp() sind dynamische Schriftgrößen, die sich zwischen der Schriftgröße für kleine Monitore bis zur Schriftgröße für einen großen Viewport dynamisch und ohne Breakpoints anpassen.
Wie kommen die Werte für preferred value zustande? Um ein gleichmäßiges Vergrößern / Verkleinern je nach Fensterbreite zu erzielen, liegen die Werte auf der Geraden zwischen minimaler und maximaler font-size. Mit letzter Kraft erinnern wir uns an die Mathestunden oder werfen einen Blick auf Steigung einer Geraden berechnen.
px
px
px
px
Die Schriftgröße für eine Viewportgröße zwischen 320px und 960px liegt auf der roten Geraden.
Mit der Steigung finden wir den Wert für den Schnittpunkt der Y-Achse mit der verlängerten gestrichtelten Linie:
Schnittpunkt = minVPsize * Steigung + minFontsize
Der preferredValue – bevorzugter Wert – der clamp-Funktion folgt damit der Formel
preferredValue = Schnittpunkt[rem] + (Steigung * 100)[vw]
clamp für dynamische Elementbreite einsetzen
Die CSS-Funktion clamp() erlaubt nicht nur dynamische Schriftgrößen, sondern passt beliebige Elemente zwischen einem Minimal- und Maximalwert an, z. B.:
img.logo {
width: clamp(100px, 15vw, 180px);
}
- 100px: Minimalgröße (bei sehr kleinen Viewports, z. B. < 600px),
- 15vw: »Wunschwert« – hier 15 % der Viewport-Breite (wird in der Mitte des Bereichs aktiv),
- 180px: Maximalgröße (bei sehr großen Viewports, z. B. > 1200px).
Bei kleinen Viewports (z. B. Smartphones) ist das Logo nie kleiner als 100px, auf großen Bildschirmen ist es nie größer als 180px. Dazwischen passt sich die Größe des Logos ganz ohne Breakpoints flüssig und ohne Sprünge an.
clamp Galerie
clamp() eignet sich für alle Eigenschaften, für die Zahlenwerte oder Prozente für die Breite oder einen Winkel gelten. Ein Beispiel für clamp() ist eine Bilder-Galerie ohne einen einzigen Breakpoint mit einem Minimum an CSS.
<clamp-gallery>
<clamp-img>
<img src="nebel-1200.webp" width="1200" height="900" alt="nebel-1200"
srcset="nebel-1960.webp 1960w,
nebel-1200.webp 1200w,
nebel-720.webp 720w"
sizes="(max-width: 900px) 90vw,
(max-width:1200px) 100vw,
50vw">
</clamp-img>
<clamp-img>
…
</clamp-img>
</clamp-gallery>
clamp-gallery img {
object-fit: cover;
width: 100%;
height: 100%;
}
clamp-gallery {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
}
clamp-img {
flex: 1 1 15rem;
width: clamp(200px, 100%, 500px);;
}
Auf kleinen Monitoren folgen die Bilder linear aufeinander, auf größeren Monitoren 2 x 2 und Bild in voller Breite, dann 1 x 3, 1 x 2 und 1 x 4 plus volle Breite und am Ende alle Bilder in einer Reihe.
