clamp(), min() und max() sind drei Funktionen, die einen Wert begrenzen oder zwischen Grenzen mitwachsen lassen. Mit ihnen wird Typografie ohne Breakpoints flüssig.
- clamp(), min(), max()
Funktionen, die einen Wert nach unten, nach oben oder in beide Richtungen begrenzen.
Beispiel: „Ein clamp nimmt drei Werte: Minimum, Wunschwert und Maximum.“
Flüssige Typografie
font-size: clamp(1.75rem, 4vw + 0.5rem, 3.5rem);Die Schrift wächst mit der Fensterbreite, bleibt aber nie kleiner als der erste und nie größer als der letzte Wert. Das ersetzt eine Reihe von Media Queries durch eine Zeile. Der mittlere Wert sollte einen festen Anteil enthalten, sonst skaliert die Schrift beim Zoomen nicht mit.
min und max einzeln
min() nimmt den kleineren der Werte und begrenzt damit nach oben, max() umgekehrt. Die Namen verwirren regelmäßig: width: min(100%, 70ch) heißt nie breiter als 70 Zeichen und nie breiter als der Platz.