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, kann aber breiter sein, wenn das Ansichtsfenster mehr als 2000px breit ist (in diesem Fall wäre 1vw gleich 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 (mithilfe arithmetischer Operatoren), literale Werte oder andere Ausdrücke wie attr() sein, die zu einem gültigen Argumenttyp (wie <length>) auswerten, oder verschachtelte min() und max()-Funktionen.

Sie können unterschiedliche Einheiten für jeden Wert in Ihrem Ausdruck verwenden. Sie können auch Klammern verwenden, um die Rechenreihenfolge festzulegen, wenn nötig.

Hinweise

• Mathematische Ausdrücke, die Prozentangaben für Breiten und Höhen in Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen sowohl in automatischen als auch festen Layout-Tabellen enthalten, könnten als würden sie auto verwenden, behandelt werden.
• Es ist erlaubt, min() und andere max()-Funktionen als Ausdruckswerte zu verschachteln. Die Ausdrücke sind vollständige mathematische Ausdrücke, sodass direkte Addition, Subtraktion, Multiplikation und Division ohne Verwendung der calc()-Funktion selbst möglich sind.
• Der Ausdruck kann Werte enthalten, die die Addition ( + ), Subtraktion ( - ), Multiplikation ( * ) und Division ( / ) Operatoren kombinieren, unter Anwendung der Standard-Regeln für Operator-Prioritäten. Achten Sie darauf, auf beiden Seiten der + und - Operanden ein Leerzeichen zu setzen. Die Operanden im Ausdruck dürfen jeden <length> Syntax-Wert haben.
• 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. Eine Empfehlung ist, die min()-Funktion innerhalb einer max()-Funktion zu verwenden, die 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, wobei die Textgröße skalierbar ist, wenn die Seite gezoomt wird.

• MDN Understanding WCAG, Leitfaden 1.4 Erklärungen
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

Beispiele

Festlegen einer Mindestgröße für eine Schriftart

Ein weiterer Anwendungsfall für max() ist es, einer Schriftgröße zu erlauben zu wachsen, während sichergestellt wird, dass sie mindestens eine Mindestgröße hat, was es ermöglicht, responsive Schriftgrößen zu haben, während die Lesbarkeit gewährleistet bleibt.

Schauen wir uns etwas CSS an:

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

Die Schriftgröße wird mindestens 2rem betragen, also das Doppelte der Standardschriftgröße für die 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 Finden des minimalen Wertes, der für eine Eigenschaft erlaubt ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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