min()

Im obigen ersten Beispiel beträgt die maximale Breite 200px, kann aber kleiner sein, wenn das Ansichtsfenster weniger als 400px breit ist (in diesem Fall wären 1vw 4px, sodass 50vw 200px wären). Diese Technik verwendet eine absolute Einheit, um einen festen Maximalwert für die Eigenschaft festzulegen, und eine relative Einheit, um den Wert in kleineren Ansichtsfenstern zu reduzieren.

Die min()-Funktion nimmt ein oder mehrere durch Kommas getrennte Ausdrücke als Parameter, wobei das kleinste (am meisten negative) Ausdrucksergebnis als Wert verwendet wird.

Die Ausdrücke können mathematische Ausdrücke (mit arithmetischen Operatoren), literale Werte oder andere Ausdrücke wie attr() sein, die sich zu einem gültigen Argumenttyp auswerten (wie <length>).

Sie können, wenn Sie möchten, unterschiedliche Einheiten für jeden Wert in Ihrem Ausdruck 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 auf Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen sowohl in automatisch als auch in festgelegten Layout-Tabellen beinhalten, können so behandelt werden, als ob auto angegeben wurde.
• Es ist erlaubt, max() und andere min()-Funktionen als Ausdruckswerte zu verschachteln. Die Ausdrücke sind vollständige mathematische Ausdrücke, sodass Sie direkte Addition, Subtraktion, Multiplikation und Division ohne die Verwendung der calc()-Funktion selbst verwenden können.
• Der Ausdruck kann Werte kombinieren, die die Operatoren Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) verwenden und die Standardpräzedenzregeln der Operatoren befolgen. Achten Sie darauf, auf jeder Seite der + und - Operanden ein Leerzeichen zu setzen. Die Operanden im Ausdruck können jeden <length>-Syntaxwert verwenden.
• Sie können (und müssen oft) min() und max()-Werte kombinieren oder min() innerhalb einer clamp()- oder calc()-Funktion verwenden.
• Sie können mehr als zwei Argumente bereitstellen, wenn Sie mehrere Einschränkungen anwenden müssen.

<min()> = 
  min( <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 Sie min() verwenden, um eine maximale Schriftgröße festzulegen, stellen Sie sicher, dass die Schriftart mindestens 200% für die Lesbarkeit skaliert werden kann (ohne unterstützende Technologien wie eine Zoomfunktion).

• MDN Verstehen WCAG, Erklärung zu Richtlinie 1.4
• Verstehen des Erfolgskriteriums 1.4.4 | W3C Verstehen WCAG 2.0

Ein weiterer Anwendungsfall für min() ist das Festlegen einer maximalen Größe für responsive Formularelemente: Die Breiten von Labels und Eingabefeldern können verkleinert werden, wenn die Breite des Formulars kleiner wird.

Schauen wir uns einige CSS-Regeln an:

input,
label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}

Hier ist das Formular selbst zusammen mit dem Rand, der Umrandung und der Polsterung 100% der Breite des übergeordneten Elements. Wir legen fest, dass das Eingabefeld und das Label entweder 40% der Formularbreite bis zum Padding oder maximal 400px breit sein sollen, je nachdem, welcher Wert kleiner ist. Mit anderen Worten, die maximale Breite des Labels und des Eingabefeldes beträgt 400px. Die minimale Breite beträgt 40% der Formularbreite, was auf dem Bildschirm einer Smartwatch sehr klein ist.

<form>
  <label for="misc">Type something:</label>
  <input type="text" id="misc" name="misc" />
</form>

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