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 oben gezeigten Beispiel wird die Breite mindestens 400px betragen, aber größer sein, wenn das Ansichtsfenster mehr als 2000px breit ist (in diesem Fall wären 1vw 20px, sodass 20vw 400px wären). Diese Technik verwendet eine absolute Einheit, um einen festen Mindestwert für die Eigenschaft anzugeben, und eine relative Einheit, um den Wert an größere Ansichtsfenster anzupassen.

Syntax

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

Parameter

Die max()-Funktion nimmt ein oder mehrere durch Kommas getrennte 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 von arithmetischen Operatoren), literale Werte oder andere Ausdrücke, wie attr(), sein, die sich zu einem gültigen Argumenttyp auswerten (wie <length>), oder verschachtelte min()- und max()-Funktionen.

Sie können unterschiedliche Einheiten für jeden Wert in Ihrem Ausdruck verwenden. Sie können auch Klammern zur Festlegung der Rechenreihenfolge verwenden, wenn dies erforderlich ist.

Hinweise

• Mathematische Ausdrücke, die Prozentsätze für Breiten und Höhen bei Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen in sowohl automatischen als auch festen Layout-Tabellen beinhalten, können 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, sodass Sie direkte Addition, Subtraktion, Multiplikation und Division verwenden können, ohne die calc()-Funktion selbst zu nutzen.
• Der Ausdruck kann Werte beinhalten, die die Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) Operatoren kombinieren, unter Anwendung der Standardregeln für Operatorvorrang. Achten Sie darauf, auf jeder Seite der +- und --Operanden ein Leerzeichen einzufügen.
• Sie können (und müssen oft) 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 eines max() zu verwenden, das als zweiten Wert eine relative Längeneinheit hat, die immer groß genug zum Lesen ist. Zum Beispiel:

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

Dies gewährleistet eine Mindestgröße von 1rem, mit einer Textgröße, die sich vergrößert, wenn die Seite gezoomt wird.

• MDN Understanding WCAG, Richtlinie 1.4 Erklärungen Understanding Success Criterion 1.4.4: Resize Text | WAI | W3C

Beispiele

Festlegen einer Mindestgröße für eine Schriftart

Ein weiterer Anwendungsfall für max() ist es, 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 wird mindestens 2rems betragen, also 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>

Betrachten Sie die max()-Funktion als Suche nach dem minimal erlaubten Wert für eine Eigenschaft.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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