max()

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, kann aber breiter werden, wenn der Viewport mehr als 2000px breit ist (in diesem Fall wären 1vw 20px, also wären 20vw 400px). Diese Technik verwendet eine absolute Maßeinheit, um einen festen Mindestwert für die Eigenschaft zu definieren, und eine relative Einheit, um den Wert an größere Viewports anzupassen.

Syntax

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

Parameter

Die max()-Funktion nimmt einen oder mehrere durch Komma getrennte Ausdrücke als Parameter. Der größte (positivste) Ausdruckswert wird als Wert der zugewiesenen Eigenschaft verwendet.

Die Ausdrücke können mathematische Ausdrücke (mit arithmetischen Operatoren), Literalwerte oder andere Ausdrücke wie attr() sein, die sich 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 Reihenfolge der Berechnung festzulegen, wenn nötig.

Hinweise

• Mathematische Ausdrücke, die Prozentsätze für Breiten und Höhen von Tabellenspalten, Tabellenspalten-Gruppen, Tabellenreihen, Tabellenreihen-Gruppen und Tabellenzellen sowohl in automatischen als auch festen Layout-Tabellen enthalten, können behandelt werden, als ob auto angegeben worden wäre.
• Es ist zulässig, 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 ohne die calc()-Funktion selbst verwenden können.
• Der Ausdruck kann Werte kombinieren, die die Operatoren Addition ( + ), Subtraktion ( - ), Multiplikation ( * ) und Division ( / ) verwenden, unter Anwendung der Standardregeln für Operatorpräzedenz. Stellen Sie sicher, dass Sie auf beiden Seiten der + und - Operanden ein Leerzeichen setzen. Die Operanden im Ausdruck können jeden <length>-Syntaxwert haben.
• 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 ist, um gelesen zu werden. Ein Vorschlag ist, die min()-Funktion innerhalb eines max() zu verwenden, 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 gezoomt wird.

• MDN Verständnis WCAG, Erklärung des Leitfadens 1.4
• Verständnis des Erfolgskriteriums 1.4.4 | W3C Verständnis WCAG 2.0

Beispiele

Festlegen einer Mindestgröße für eine Schriftart

Ein weiterer Anwendungsfall für max() besteht darin, eine Schriftgröße anwachsen zu lassen, während sichergestellt wird, dass sie mindestens eine Mindestgröße hat, um responsive Schriftgrößen zu ermöglichen, die gut lesbar bleiben.

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 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 Mittel, um den minimal zugelassenen Wert für eine Eigenschaft zu finden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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