CSS clamp, min und max

clamp ist eine CSS-Funktion, die bevorzugt als Klammer für die Schriftgröße eingesetzt wird, um sie stufenlos an den verfügbaren Platz anzupassen – ohne Sprünge an den Breakpoints.

clamp, min und max bringen mehr Flexibilität anstelle von sichtbaren Bruchstellen und Sprüngen.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

min ()

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.

Wynken, Blynken and Nod

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 ()

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 50vw.

Wynken, Blynken and Nod

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(50vw, 20ch);

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 ()

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

clamp preferred Value für minimale und maximale Breite

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 – minimale und maximale Breite der Box.

Der Block in diesem Beispiel ist mindestens 300px breit und dehnt sich auf großen Monitoren auf bis zu 800px Breite. Die Schriftgröße für die Überschrift und den Lauftext soll mindestens 1.25rem () und maximal 2.825rem () betragen. Dazwischen soll sich die Schriftgröße stufenlos und ohne Breakpoints anpassen.

Breite: 300px (18.75rem) und weniger

Schriftgröße 20px (1.25rem)

Breite 301px (18.8125rem) bis 800px (49.9375rem)

Schriftgröße Interpolieren

Breite 800px (50rem)

Schriftgröße 42px (2.625rem)

Box größer aufziehen mit den Anfassern in der Ecke unten rechts

Schriftgröße eingrenzen

Auf einem kleinen Monitor rendert der Browser die Schrift mit 1rem. Mit einem größeren Browserfester wird 3% des Viewports größer als 1rem und die Schriftgröße wächst bis zu einem bestimmten Punkt – der Obergrenze von 1.4rem. Die Schrift wird nie zu klein oder zu groß.

preferredValue berechnen

Wie berechnet man den preferredValue? Im ersten Schritt wird die Schriftgröße in ein Verhältnis zur Breite der Box gebracht.

maxFontSize - minFontSize maxWidth - minWidth

oder als Script

rel = (maxFontSize - minFontSize) / (maxWidth - minWidth)
inter = -minWidth * rel + minFontSize
prefValue = inter[rem] + (rel * 100)[vw]