TIL: Thema

mit der calc()-Funktion ließen sich bereits Wertangaben berechnen z. B.
width: calc(100% - 150px);

clamp()-Funktion

die Funktion dient in CSS zur dynamischen Größenberechnung

für Schriftgrößen, Breite, Höhe, Innen- bzw. Außenabstand sowie Border-Radius wählt die Funktion zwischen einem Minimal-, Optimal- und Maximalwert

elem {width: clamp(200px, 50vw, 860px);}

kleinster Wert: 200px, größter Wert: 860px, Optimum: 50% der Viewport-Breite

Achtung: die dynamische Berechnung für Schriftgrößen ist aufwendiger !

min()-Funktion

die Funktion dient in CSS zur Größenberechnung; der Browser verwendet stets den passenden Wert der Komma-getrennten Werteliste

.kasten {width: min(100/ - 2rem, 680px); margin-inline: auto;}

1. Wert in min() sorgt für 1rem Abstand links wie rechts
2. Wert in min() gibt maximale Blockbreite vor
margin-inline dient der horizontalen Zentrierung

die Funktion setzt eine Obergrenze und erspart @Media-Query

max()-Funktion

die gegenteilige Funktion dient in CSS ebenfalls zur Größenberechnung; der Browser verwendet stets den passenden Wert der Komma-getrennten Werteliste

width: max(30vw, 30ch);

30ch ist die minimale Boxbreite und ihr Maximum liegt bei 30vw = 30% der Viewportbreite

die Funktion setzt eine Untergrenze und erspart @Media-Query

Update 30.03.2026