max()

Im ersten oben gezeigten Beispiel wird die Breite mindestens 400px betragen, aber breiter sein, wenn der Viewport mehr als 2000px breit ist (in diesem Fall wäre 1vw 20px, sodass 20vw 400px wären). Diese Technik verwendet eine absolute Einheit, um einen festen Mindestwert für die Eigenschaft festzulegen, und eine relative Einheit, um den Wert an größere Viewports anpassen zu lassen.

Die max()-Funktion nimmt ein oder mehrere komma-getrennte Ausdrücke als Parameter, wobei der größte (am positivsten) Ausdruckswert als Wert der zugewiesenen Eigenschaft verwendet wird.

Die Ausdrücke können mathematische Ausdrücke (unter Verwendung arithmetischer Operatoren), literale Werte oder andere Ausdrücke wie attr() sein, die zu einem gültigen Argumenttyp auswerten (wie <length>), oder verschachtelte min() und max()-Funktionen.

Sie können verschiedene Einheiten für jeden Wert in Ihrem Ausdruck verwenden. Sie können auch Klammern verwenden, um die Berechnungsreihenfolge bei Bedarf festzulegen.

• Mathematische Ausdrücke mit Prozentangaben für Breiten und Höhen bei Tabellen-Spalten, Tabellen-Spaltengruppen, Tabellen-Zeilen, Tabellen-Zeilengruppen und Tabellen-Zellen in sowohl automatischen als auch festgelegten Layout-Tabellen könnten so behandelt werden, als wäre auto angegeben.
• Es ist erlaubt, min() und andere max()-Funktionen als Ausdruckswerte zu verschachteln. Die Ausdrücke sind volle mathematische Ausdrücke, sodass Sie direkte Addition, Subtraktion, Multiplikation und Division ohne die Verwendung der calc()-Funktion selbst nutzen können.
• Der Ausdruck kann Werte enthalten, die die Operatoren Addition ( + ), Subtraktion ( - ), Multiplikation ( * ) und Division ( / ) kombinieren, wobei die Standardregeln für die Operatorrangfolge gelten. Stellen Sie sicher, dass Sie auf jeder Seite der + und - Operanden ein Leerzeichen setzen. Die Operanden im Ausdruck können jedem <length>-Syntaxwert entsprechen.
• Sie können (und müssen häufig) min()- und max()-Werte kombinieren oder max() innerhalb einer clamp()- oder calc()-Funktion verwenden.

<max()> = 
  max( <calc-sum># )  

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<calc-product> = 
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN        

Wenn max() zur Steuerung der Textgröße verwendet wird, stellen Sie sicher, dass der Text immer groß genug ist, um gelesen zu werden. Ein Vorschlag ist, die min()-Funktion innerhalb eines max() zu verschachteln, das als zweiten Wert eine relative Längeneinheit hat, die immer groß genug ist, um gelesen zu werden. Zum Beispiel:

small {
  font-size: max(min(0.5vw, 0.5em), 1rem);
}

Dies stellt eine Mindestgröße von 1rem sicher, mit einer Textgröße, die skaliert, wenn die Seite vergrößert wird.

• MDN Verständnis WCAG, Leitlinie 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.4 | W3C Verständnis WCAG 2.0

Ein weiterer Anwendungsfall für max() ist das Ermöglichen, dass eine Schriftgröße wächst, während sichergestellt wird, dass sie mindestens eine Mindestgröße hat, um reaktionsfähige Schriftgrößen zu ermöglichen und die Lesbarkeit zu gewährleisten.

Betrachten wir etwas CSS:

h1 {
  font-size: 2rem;
}
h1.responsive {
  font-size: max(4vw, 2em, 2rem);
}

Die Schriftgröße beträgt mindestens 2rems oder das Doppelte der Standardschriftgröße der Seite. Dies stellt sicher, dass sie lesbar und barrierefrei ist.

<h1>This text is always legible, but doesn't change size</h1>
<h1 class="responsive">
  This text is always legible, and is responsive, to a point
</h1>

Denken Sie an die max()-Funktion als eine Möglichkeit, den minimal erlaubten Wert für eine Eigenschaft zu finden.

• calc()
• clamp()
• min()
• CSS-Werte