min()

width: min(50vw, 200px);

width: min(100vw, 4000px);

width: min(150vw, 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 obigen Beispiel wird die Breite maximal 200px betragen, aber kleiner sein, wenn der Viewport weniger als 400px breit ist (in diesem Fall wäre 1vw 4px, also wäre 50vw 200px). Diese Technik verwendet eine absolute Einheit, um einen festen Maximalwert für die Eigenschaft anzugeben, und eine relative Einheit, um den Wert zu verkleinern, um kleinere Viewports zu berücksichtigen.

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

Die Ausdrücke können mathematische Ausdrücke (unter Verwendung arithmetischer Operatoren) sein, literale Werte oder andere Ausdrücke, wie attr(), die zu einem gültigen Argumenttyp (wie <length>) ausgewertet werden.

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

• Mathematische Ausdrücke, die Prozentsätze für Breiten und Höhen von Tabellenspalten, Tabellenspiel-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen in sowohl automatischen als auch festen Layout-Tabellen umfassen, können so behandelt werden, als ob auto angegeben worden wäre.
• 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 verwenden können, ohne die calc()-Funktion selbst zu verwenden.
• Der Ausdruck kann Werte umfassen, die die Operatoren Addition ( + ), Subtraktion ( - ), Multiplikation ( * ) und Division ( / ) kombinieren, unter Verwendung der Standard-Präzedenzregeln für Operatoren. Stellen Sie sicher, dass Sie auf jeder Seite der + und - Operanden ein Leerzeichen einfügen. Die Operanden im Ausdruck können jeden <length>-Syntaxwert annehmen.
• Sie können (und sollten 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 Schrift mindestens um 200 % skaliert werden kann, um die Lesbarkeit zu gewährleisten (ohne unterstützende Technologien wie eine Zoomfunktion).

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

Ein weiterer Anwendungsfall für min() ist das Festlegen einer maximalen Größe für responsive Formularelemente: Ermöglicht die Verkleinerung der Breite von Labels und Eingaben, während die Breite des Formulars abnimmt.

Werfen wir einen Blick auf einige CSS:

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 sind das Formular selbst sowie der Rand, der Rahmen und der Innenabstand zu 100% der Breite des übergeordneten Elements. Wir erklären das Eingabe- und Label-Element als das kleinere von 40% der Formularbreite bis zum Innenabstand oder 400px breit, je nachdem, was kleiner ist. Mit anderen Worten, die maximale Breite, die das Label und das Eingabefeld haben können, beträgt 400px. Die minimale Breite beträgt 40% der Formularbreite, was auf einem Smartwatch-Bildschirm 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