Diese Seite wurde von der Cloud Translation API übersetzt.

CSS „min()“, „max()“ und „clamp()“

Hier erfahren Sie, wie Sie mit diesen gut unterstützten CSS-Funktionen die Größe von Elementen anpassen, korrekte Abstände beibehalten und eine fließende Typografie implementieren.

Una Kravets

Da responsives Webdesign immer komplexer wird, entwickelt sich CSS ständig weiter, um Autoren mehr Kontrolle zu geben. Die Funktionen min(), max() und clamp(), die jetzt in allen modernen Browsern unterstützt werden, gehören zu den neuesten Tools, mit denen das Erstellen von Websites und Apps dynamischer und responsiver wird. Mit diesen Funktionen können Sie die Größe von Elementen steuern, den Abstand zwischen Elementen beibehalten und eine flexible und fließende Typografie erstellen.

Mit den mathematischen Funktionen calc(), min(), max() und clamp() können mathematische Ausdrücke mit Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) als Komponentenwerte verwendet werden.
CSS-Werte und -Einheiten – Stufe 4

Unterstützte Browser

`min()`

Unterstützte Browser

Quelle

`max()`

Unterstützte Browser

Quelle

`clamp()`

Unterstützte Browser

Quelle

Nutzung

Sie können min(), max() und clamp() auf der rechten Seite eines beliebigen CSS-Ausdrucks verwenden, wenn es sinnvoll ist. Für min() und max() geben Sie eine Argumentliste mit Werten an und der Browser bestimmt, welcher der kleinste oder größte ist. Im Fall von width: min(1rem, 50%, 10vw) berechnet der Browser beispielsweise, welche dieser relativen Einheiten die kleinste ist, und verwendet diesen Wert für die Breite des Elements.

In dieser Codepen-Demo wird mit der Funktion „min()“ der Mindestwert aus einer Liste von Optionen ausgewählt.

Die Funktion max() macht dasselbe für den Höchstwert.

In dieser Codepen-Demo wird mit der max()-Funktion ein Wert aus einer Liste von Optionen ausgewählt.

Wenn Sie clamp() verwenden möchten, geben Sie drei Werte ein: einen Mindestwert, einen idealen Wert, von dem aus berechnet werden soll, und einen Höchstwert.

In dieser Codepen-Demo hält die Funktion „clamp()“ den Wert zwischen dem angegebenen Minimum und Maximum.

Sie können diese Funktionen überall dort verwenden, wo <length>, <frequency>, <angle>, <time>, <percentage>, <number> oder <integer> zulässig ist. Sie können sie einzeln (wie in font-size: max(0.5vw, 50%, 2rem)), mit calc() (wie in font-size: max(calc(0.5vw - 1em), 2rem)) oder kombiniert (wie in font-size: max(min(0.5vw, 1em), 2rem)) verwenden.

Im Folgenden finden Sie einige Beispiele für die Verwendung dieser Funktionen.

Die perfekte Breite

Laut The Elements of Typographic Style von Robert Bringhurst gilt „eine Zeilenlänge von 45 bis 75 Zeichen für eine einspaltige Seite mit einer Serifenschrift in einer bestimmten Textgröße als zufriedenstellend“.

Damit Ihre Textblöcke zwischen 45 und 75 Zeichen breit bleiben, verwenden Sie clamp() und ch (Zeichenabstand mit einer Breite von 0).

p {
  width: clamp(45ch, 50%, 75ch);
}

So kann der Browser die Breite des Absatzes bestimmen. Die Breite wird standardmäßig auf 50% festgelegt. Wenn 50 % kleiner als 45ch ist, wird stattdessen 45ch als Breite verwendet. Ist 50 % breiter als 75ch, wird 75ch verwendet.

Mit der Funktion „clamp()“ können Sie eine Mindest- und eine Maximalbreite festlegen. Demo auf Codepen ansehen

Sie können auch nur min() oder max() verwenden. Wenn das Element immer eine Breite von 50% haben und auf größeren Bildschirmen eine Breite von 75ch nicht überschreiten soll, verwenden Sie width: min(75ch, 50%);, um die maximale Größe festzulegen.

Mit der Funktion „min()“ können Sie eine maximale Breite festlegen.

Ebenso können Sie mit der Funktion max() eine Mindestgröße für gut lesbaren Text festlegen, wie in width: max(45ch, 50%);. Hier wählt der Browser den größeren Wert aus, d. h. das Element muss mindestens 45ch sein.

Mit der max()-Funktion können Sie eine Mindestbreite festlegen.

Ränder verwalten

Mit max() können Sie auch eine Mindestabstandgröße festlegen. Dieses Beispiel stammt aus CSS Tricks, wo Leser Caluã de Lacerda Pataca diese Idee geteilt hat: Geben Sie einem Element bei größeren Bildschirmgrößen zusätzlichen Abstand, aber bei kleineren Bildschirmgrößen einen Mindestabstand. Verwenden Sie dazu calc() oder max() und ziehen Sie von beiden Seiten des Elements den Mindestabstand ab: calc((100vw - var(--contentWidth)) / 2) oder max(2rem, 50vw - var(--contentWidth) / 2). In Ihrem Stylesheet sollte es so aussehen:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

Mit der Funktion „max()“ einen Mindestabstand für eine Komponente festlegen. Siehe Demo zu Codepen.

Fließende Typografie

Zur Aktivierung der flüssigen Typografie hat Mike Riethmeuller ein Verfahren bekannt gemacht, bei dem mit der Funktion clamp() eine minimale und maximale Schriftgröße festgelegt und die Skalierung zwischen diesen Größen ermöglicht wird.

Mit clamp() eine fließende Typografie erstellen. Demo auf Codepen ansehen

Vor clamp(), erforderte die Schriftgrößenänderung komplexe Stilstrings. Jetzt können Sie die Arbeit dem Browser überlassen. Legen Sie die minimal zulässige Schriftgröße (z. B. 1.5rem für einen Titel), die maximale Größe (z. B. 3rem) und die ideale Größe (z. B. 5vw) fest. Jetzt haben Sie die Typografie, die mit der Breite des Darstellungsbereichs der Seite skaliert wird, bis die minimalen und maximalen Werte mit sehr wenig Code erreicht werden:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Weitere Ressourcen

Titelbild von @yer_a_wizard auf Unsplash.