CSS/Funktionen/clamp()

Die clamp()-Funktion klemmt einen Größenbereich zwischen einem Minimum und einem Maximalwert.

Parameter	Sie enthält drei Parameter: ein Minimum, einen bevorzugten Wert, und den erlaubten Maximalwert. clamp(MIN, VAL, MAX) wird als max(MIN, min(VAL, MAX)) aufgelöst
anwendbar auf	Die clamp()-Funktion kann für jede Längenangabe, , <Frequenz>, Winkel>, <Zeitangabe>, <Prozentwert>, <Zahl>, oder <integer> verwendet werden.
Browsersupport	caniuse: css-math-functions

Beispiel

.box {

  width: clamp(400px, 50%, 800px);   

}

/* 50% Breite, mindestens 400px und höchstens 800px*/

Weblinks

• CSSWG: CSS Intrinsic & Extrinsic Sizing Module Level 4: 1. Mathematical Expressions
  • 11.2. Comparison Functions: min(), max(), and clamp()
• MDN: clamp()

• CodePen zum Naked CSS Day 2020 von Gunnar Bittersmann

Siehe auch

• Einstieg in CSS
  • Vom Entwurf zum Layout
• CSS/Tutorials/Schreib- und Leserichtung#vertikale Image Credits