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

Responsives Webdesign wird immer nuancierter und CSS-Code wird ständig weiterentwickelt, um die Autoren mehr Kontrolle hatten. Die min(), max() und clamp()-Funktionen die mittlerweile in allen modernen Browsern unterstützt werden, gehören zu den neuesten Tools Websites und Apps dynamischer und reaktionsschneller gestalten. Sie können diese Funktionen zum Steuern der Größe und Größenanpassung von Elementen und zum Beibehalten des Abstands zwischen und eine flexible und flüssige Typografie zu 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()

max()

clamp()

Nutzung

Du kannst min(), max() und clamp() rechts von jedem Preisvergleichsportal verwenden wenn es sinnvoll wäre. Für min() und max() geben Sie Folgendes an: Argumentliste der Werte und der Browser bestimmt, welcher der am kleinsten oder größten. Im Fall von width: min(1rem, 50%, 10vw) berechnet der Browser, welche dieser relativen Einheiten am kleinsten ist, und verwendet diesen Wert für die Breite des Elements.

Die Funktion max() verhält sich auf dieselbe Weise für den Maximalwert.

Wenn Sie clamp() verwenden möchten, geben Sie drei Werte ein: einen Mindestwert, einen idealen Wert, und einem Maximalwert berechnet werden.

Diese Funktionen sind überall <length>, <frequency>, <angle>, <time>, <percentage>, <number> oder <integer> ist zulässig. Ich können sie eigenständig verwenden (wie in font-size: max(0.5vw, 50%, 2rem)), mit calc() (wie in font-size: max(calc(0.5vw - 1em), 2rem)) oder zusammengesetzt (wie in font-size: max(min(0.5vw, 1em), 2rem).

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

Die perfekte Breite

Nach The Elements of Typographic Stil von Robert Bringhurst an, "alles zwischen 45 und 75 Zeichen gilt weithin als zufriedenstellende Zeilenlänge für eine einspaltige Seitenansicht mit Serifentext in Textgröße eingeben.“

Um sicherzustellen, dass Ihre Textblöcke zwischen 45 und 75 Zeichen breit sind, verwenden Sie clamp() und das ch (Zeichenanstieg mit 0 Zeichen) Einheit:

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

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

Sie können auch nur min() oder max() verwenden. Wenn Sie möchten, dass die -Element muss immer die Breite von 50% haben und darf bei größeren Abmessungen 75ch nicht überschreiten Bildschirmen verwenden, legen Sie mit width: min(75ch, 50%); die maximale Größe fest.

Auf die gleiche Weise können Sie mit der Funktion max() eine Mindestgröße für lesbaren Text festlegen. wie in width: max(45ch, 50%);. Hier wählt der Browser entweder aus, value ist größer, das heißt, das Element muss mindestens 45ch sein.

Abstand verwalten

Sie können auch max() verwenden, um eine Mindestabstandsgröße festzulegen. Dieses Beispiel stammt aus CSS-Tricks Der Leser Caluã de Lacerda Pataca äußerte die Idee, dass ein Element zusätzlicher Abstand bei größeren Bildschirmgrößen und ein Mindestabstand bei kleineren Bildschirmgrößen. Verwenden Sie dazu calc() oder max() und subtrahieren Sie den Minimalwert Abstand von beiden Seiten des Elements: calc((100vw - var(--contentWidth)) / 2), oder max(2rem, 50vw - var(--contentWidth) / 2). In Ihrem Stylesheet sollte so aussehen:

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

Fließende Typografie

So aktivieren Sie die flüssige Typografie: Mike Riethmeuller machte eine Technik bekannt die die Funktion clamp() verwendet, um eine minimale oder maximale Schriftgröße und eine Skalierung zwischen diesen Größen ermöglichen.

Vor dem clamp(), waren für das Entwerfen der Schriftskalierung komplexe Strings erforderlich. Jetzt können Sie den Browser die Arbeit für Sie erledigen lassen. Mindestgröße für zulässige Schriftart festlegen Größe (z. B. 1.5rem für einen Titel), maximale Größe (z. B. 3rem) und ideale Größe (z. B. 5vw). Jetzt verfügen Sie über eine Typografie, die mit der Breite des Darstellungsbereichs bis zur Erreichung der begrenzenden Mindest- und Höchstwerte unter Verwendung von sehr wenig Code:

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

Weitere Ressourcen

• Werte und Einheiten für Preisvergleichsportale auf MDN
• CSS-Werte und -Einheiten – Spezifikationen der Stufe 4
• Artikel zu CSS-Tricks zur Breite des inneren Elements
• min(), max(), clamp() Übersicht von Ahmad Shadeed

Titelbild von @yer_a_wizard Spritzwasser –