max()

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, also wären 20vw 400px). Diese Technik verwendet eine absolute Einheit, um einen festen Mindestwert für die Eigenschaft festzulegen, und eine relative Einheit, um den Wert an größere Ansichtsfenster anzupassen.

Die max()-Funktion nimmt als Parameter ein oder mehrere durch Kommas getrennte Ausdrücke, wobei der größte (positivste) Ausdruckswert als Wert der Eigenschaft verwendet wird, der sie zugewiesen ist.

Die Ausdrücke können Mathe-Ausdrücke (mit arithmetischen Operatoren), literale Werte oder andere Ausdrücke, wie attr(), enthalten, die zu einem gültigen Argumenttyp evaluieren (wie <length>), oder verschachtelte min() und max()-Funktionen.

Sie können für jeden Wert in Ihrem Ausdruck unterschiedliche Einheiten verwenden. Sie können auch Klammern verwenden, um die Reihenfolge der Berechnungen festzulegen, wenn dies erforderlich ist.

• Mathematische Ausdrücke, die Prozentsätze für Breiten und Höhen von Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen in sowohl automatischen als auch festen Layout-Tabellen beinhalten, könnten 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 Mathe-Ausdrücke, sodass Sie direkte Addition, Subtraktion, Multiplikation und Division verwenden können, ohne die calc()-Funktion selbst zu benutzen.
• Der Ausdruck kann Werte enthalten, die die Operatoren Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) kombinieren, unter Verwendung der Standardregeln zur Vorrangordnung von Operatoren. Achten Sie darauf, auf jeder Seite der + und - Operanden ein Leerzeichen zu setzen. Die Operanden im Ausdruck können beliebige <length>-Syntax-Werte sein.
• Sie können (und müssen oft) min() und max()-Werte kombinieren oder max() innerhalb einer clamp()- oder calc()-Funktion verwenden.

<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        

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 Verwendung der min()-Funktion, die in eine max() eingebettet ist und 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 vergrößert wird.

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

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 responsive Schriftgrößen zu ermöglichen, während die Lesbarkeit gewährleistet bleibt.

Werfen wir einen Blick auf einige CSS:

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

Die Schriftgröße wird mindestens 2rem betragen, oder doppelt so groß wie die Standardgröße der Schriftart 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 Ermöglichung des minimalen Wertes für eine Eigenschaft.

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