clamp() CSS-Funktion

Probieren Sie es aus

font-size: clamp(1rem, 2.5vw, 2rem);

font-size: clamp(1.5rem, 2.5vw, 4rem);

font-size: clamp(1rem, 10vw, 2rem);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    The font-size of this text varies depending on the base font of the page,
    and the size of the viewport.
  </div>
</section>

Beachten Sie, dass die Verwendung von clamp() für Schriftgrößen, wie in diesen Beispielen gezeigt, es Ihnen ermöglicht, eine Schriftgröße festzulegen, die mit der Größe des Ansichtsfensters wächst, aber nicht unter eine Mindestschriftgröße oder über eine Maximalschriftgröße hinausgeht. Es hat den gleichen Effekt wie der Code in Fluid Typography, aber in einer Zeile und ohne die Verwendung von Media Queries.

Syntax

/* Static values */
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);

Parameter

Die Funktion clamp(min, val, max) akzeptiert drei durch Kommas getrennte Ausdrücke als Parameter.

min

Der Mindestwert ist der kleinste (am negativsten) Wert. Dies ist die untere Grenze im Bereich der zulässigen Werte. Wenn der bevorzugte Wert kleiner als dieser Wert ist, wird der Mindestwert verwendet.

val

Der bevorzugte Wert ist der Ausdruck, dessen Wert verwendet wird, solange das Ergebnis zwischen den Mindest- und Höchstwerten liegt.

max

Der Höchstwert ist der größte (am positivsten) Ausdruckswert, dem der Wert der Eigenschaft zugewiesen wird, wenn der bevorzugte Wert größer als diese obere Grenze ist.

Die Ausdrücke können mathematische Funktionen sein (siehe calc() für weitere Informationen), literale Werte, andere Ausdrücke, die sich zu einem gültigen Argumenttyp auswerten (wie <length>), oder verschachtelte min() und max() Funktionen. Für mathematische Ausdrücke können Sie Addition, Subtraktion, Multiplikation und Division ohne die Verwendung der Funktion calc() selbst verwenden. Sie können auch Klammern verwenden, um die Reihenfolge der Berechnungen festzulegen, wenn nötig.

Sie können für jeden Wert in Ihren Ausdrücken unterschiedliche Einheiten verwenden und unterschiedliche Einheiten in jeder mathematischen Funktion, die ein Argument bildet.

Beachten Sie die folgenden Aspekte bei der Arbeit mit der Funktion:

• Mathematische Ausdrücke, die Prozentsätze für Breiten und Höhen bei Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilengruppen und Tabellenzellen in sowohl automatisierten als auch festen Layout-Tabellen beinhalten, können so behandelt werden, als ob auto angegeben worden wäre.
• Es ist erlaubt, max() und min() Funktionen als Ausdruckswerte zu verschachteln, wobei die inneren als grundlegende Klammern behandelt werden. Die Ausdrücke sind vollständige mathematische Ausdrücke, sodass Sie direkte Addition, Subtraktion, Multiplikation und Division ohne die Verwendung der Funktion calc() selbst verwenden können.
• Der Ausdruck kann Werte kombinieren, die die Operatoren Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) unter Verwendung der standardmäßigen Operatorrangfolgeregeln nutzen. Stellen Sie sicher, dass auf jeder Seite der + und - Operanden ein Leerzeichen vorhanden ist. Sie können unterschiedliche Einheiten für jeden Wert in Ihrem Ausdruck verwenden. Sie können auch Klammern verwenden, um die Reihenfolge der Berechnungen festzulegen, wenn nötig.
• Oftmals möchten Sie min() und max() innerhalb einer clamp()-Funktion verwenden.

Rückgabewert

clamp(MIN, VAL, MAX) wird als max(MIN, min(VAL, MAX)) aufgelöst.

Basierend auf den angegebenen Parametern gibt die Funktion <length>, <frequency>, <angle>, <time>, <percentage>, <number>, oder <integer> zurück.

Formale Syntax

<clamp()> = 
  clamp( [ <calc-sum> | none ] , <calc-sum> , [ <calc-sum> | none ] )