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, aber breiter sein, 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 Einheit, um einen festen Mindestwert für die Eigenschaft anzugeben, und eine relative Einheit, um den Wert zu ermöglichen, sich an größere Viewports 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 für die Eigenschaft verwendet wird, der er zugewiesen ist.

Die Ausdrücke können mathematische Ausdrücke (unter Verwendung arithmetischer Operatoren), literale Werte oder andere Ausdrücke, wie z.B. 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 bei Bedarf festzulegen.

Hinweise

• Mathematische Ausdrücke mit Prozentwerten für Breiten und Höhen von Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen in sowohl auto- als auch fixed-Layout-Tabellen 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, sodass Sie direkte Addition, Subtraktion, Multiplikation und Division ohne Verwendung der calc()-Funktion selbst verwenden können.
• Der Ausdruck kann Werte enthalten, die die Operatoren Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) kombinieren, unter Verwendung der Standard-Vorrangregeln der Operatoren. Stellen Sie sicher, dass auf jeder Seite der +- und --Operanden ein Leerzeichen steht. Die Operanden im Ausdruck können jeden <length>-Syntaxwert haben.
• Sie können (und sollten 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() zum Steuern der Textgröße verwendet wird, stellen Sie sicher, dass der Text immer groß genug zum Lesen ist. Ein Vorschlag ist, die Funktion min() innerhalb eines max() zu verschachteln, das als zweiten Wert eine relative Längeneinheit hat, die immer groß genug ist, um lesbar zu sein. 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 skaliert, wenn die Seite gezoomt wird.

• MDN Verstehen von WCAG, Guideline 1.4 Erklärungen
• Verständnis des Erfolgs-Kriteriums 1.4.4 | W3C Verstehen der WCAG 2.0

Beispiele

Festlegung einer Mindestgröße für eine Schriftart

Ein weiterer Anwendungsfall für max() ist es, eine Schriftgröße zu ermöglichen, die wächst, während sie gleichzeitig mindestens eine Mindestgröße sicherstellt, um reaktionsfähige Schriftgrößen zu ermöglichen und die Lesbarkeit sicherzustellen.

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 Standardgröße der Schriftart 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 das Finden des minimalen Wertes, der für eine Eigenschaft erlaubt ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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