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 Beispiel, das oben gezeigt wird, beträgt die Breite mindestens 400px, kann jedoch breiter sein, wenn der Viewport mehr als 2000px breit ist (in diesem Fall wären 1vw gleich 20px, sodass 20vw 400px wären). Diese Technik verwendet eine absolute Einheit, um einen festen Minimalwert für die Eigenschaft festzulegen, 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 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 (mit arithmetischen Operatoren), wörtliche Werte oder andere Ausdrücke sein, wie attr(), 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 Reihenfolge der Berechnung festzulegen, falls erforderlich.

Hinweise

• Mathematische Ausdrücke unter Einbeziehung von Prozentzahlen für Breiten und Höhen von Tabellenspalten, Tabellenkantengruppen, Tabellenzeilen, Tabellenzeilengruppen und Tabellenzellen in sowohl automatischen als auch festen Layout-Tabellen können behandelt werden, als ob auto angegeben worden wäre.
• 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 kombinieren, die die Addition ( + ), Subtraktion ( - ), Multiplikation ( * ) und Division ( / ) Operatoren verwenden, wobei die Standardregeln zur Operatorpräzedenz gelten. Achten Sie darauf, auf jeder Seite der + und - Operanden ein Leerzeichen zu setzen. Die Operanden im Ausdruck können Werte im <length> Syntax-Stil sein.
• 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 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 stellt eine Mindestgröße von 1rem sicher, mit einer Textgröße, die skaliert, wenn die Seite vergrößert wird.

• MDN Verständnis von WCAG, Leitlinie 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.4 | W3C Verständnis von WCAG 2.0

Beispiele

Festlegen einer Mindestgröße für eine Schriftart

Ein weiterer Anwendungsfall für max() ist es, eine Schriftgröße wachsen zu lassen und gleichzeitig sicherzustellen, dass sie mindestens eine Mindestgröße hat, was es ermöglicht, dass Schriftgrößen anpassungsfähig sind und 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 2rems betragen, oder das Doppelte der Standardschriftgröße der Seite. Dies gewährleistet, 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 eine Methode, den minimalen erlaubten Wert für eine Eigenschaft zu finden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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