max() CSS-Funktion

Probieren Sie es aus

width: max(20vw, 400px);

width: max(20vw, 100px);

width: max(5vw, 100px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <img
      alt="Firefox logo"
      class="logo"
      src="/shared-assets/images/examples/firefox-logo.svg" />
  </div>
</section>

Im ersten Beispiel oben wird die Breite mindestens 400px betragen, ist aber breiter, wenn der Viewport mehr als 2000px breit ist (in diesem Fall wäre 1vw gleich 20px, sodass 20vw gleich 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 je nach größerem Viewport wachsen zu lassen.

Syntax

max(1, 2, 3)
max(1px, 2px, 3px)

Parameter

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

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

Sie können für jeden Wert in Ihrem Ausdruck verschiedene Einheiten verwenden. Sie können auch Klammern verwenden, um die Reihenfolge der Berechnung festzulegen, falls erforderlich.

Hinweise

• Mathematische Ausdrücke, die Prozentsätze für Breiten und Höhen auf Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen in sowohl automatischen als auch festen Layout-Tabellen beinhalten, können so behandelt werden, als wäre auto angegeben worden.
• Es ist erlaubt, min() und andere max()-Funktionen als Ausdruckswerte zu verschachteln. Die Ausdrücke sind vollständige mathematische Ausdrücke, daher können Sie direkte Addition, Subtraktion, Multiplikation und Division ohne Verwendung der calc()-Funktion selbst verwenden.
• Der Ausdruck kann Werte umfassen, die die Operatoren Addition ( + ), Subtraktion ( - ), Multiplikation ( * ) und Division ( / ) kombinieren, unter Verwendung der Standardregeln der Operatorpräzedenz. Achten Sie darauf, auf jeder Seite der + und - Operanden einen Leerraum zu setzen. Die Operanden im Ausdruck können jeder <length>-Syntaxwert sein.
• Sie können (und oft müssen) min()- und max()-Werte kombinieren oder max() innerhalb einer clamp()- oder calc()-Funktion verwenden.

Formale Syntax

<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        

Barrierefreiheit

Wenn max() zur Steuerung der Textgröße verwendet wird, stellen Sie sicher, dass der Text immer groß genug zum Lesen ist. Ein Vorschlag ist, die min()-Funktion innerhalb einer max() zu verschachteln, die als zweiten Wert eine relative Längeneinheit hat, die immer groß genug ist, um gelesen werden zu können. 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 wird, wenn die Seite gezoomt wird.

• MDN-Verständnis von WCAG, Erklärung zur Richtlinie 1.4 Verständnis des Erfolgskriteriums 1.4.4: Text vergrößern | WAI | W3C

Beispiele

Festlegen einer Mindestgröße für eine Schriftart

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

Schauen wir uns etwas CSS an:

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 zugänglich 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 die Suche nach dem minimal erlaubten Wert für eine Eigenschaft.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• calc()
• clamp()
• min()
• Erlernen: Werte und Einheiten