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.
width: min(60ch, calc(100vw - 2rem));
Wenn die Breite des Browserfensters kleiner als 60ch ist, wird die Breite der Box durch den zweiten Wert (calc(100vw - 2rem)) festgelegt. Wird der Viewport größer als 100vw - 2em, kommt 60ch zum Zug und begrenzt die Breite der Box. So entsteht ein flexibles responsives Element ohne Media Query, die ansonsten erforderlich wäre.
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.
Bislang war das responsive Webdesign darauf angewiesen, die 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
|
font-size: clamp(1.25rem, 3vw, 3rem);
| |
+ +
Untergrenze Obergrenze
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 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.
