min()

Probieren Sie es aus

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 das Viewport weniger als 400px breit ist (in diesem Fall wäre 1vw 4px, also wären 50vw 200px). Diese Technik verwendet eine absolute Einheit, um einen festen Maximalwert für die Eigenschaft festzulegen, und eine relative Einheit, um den Wert zu verringern, um kleinere Viewports anzupassen.

Syntax

max(1, 2, 3)
max(1px, 2px, 3px)

Parameter

Die min()-Funktion nimmt ein oder mehrere durch Kommas getrennte Ausdrücke als Parameter an, wobei der kleinste (bzw. negativste) Ausdruckswert als Wert verwendet wird.

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

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 Berechnungen festzulegen, wenn dies erforderlich ist.

Hinweise

• Mathematische Ausdrücke, die Prozentsätze für Breiten und Höhen auf Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen in sowohl automatischen als auch festgelegten Layout-Tabellen enthalten, können so behandelt werden, als wäre auto angegeben worden.
• 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 kombinieren, die die Operatoren Addition ( + ), Subtraktion ( - ), Multiplikation ( * ) und Division ( / ) verwenden, gemäß den Standardregeln für die Operatorenreihenfolge. Stellen Sie sicher, dass Sie auf beiden Seiten der + und - Operanden einen Leerraum lassen. Die Operanden im Ausdruck können jeden <length> Syntaxwert haben.
• 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 angeben, wenn Sie mehrere Einschränkungen anwenden müssen.

Formale Syntax

<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        

Barrierefreiheit

Wenn Sie min() verwenden, um eine maximale Schriftgröße zu setzen, stellen Sie sicher, dass die Schriftart immer noch mindestens 200% für die Lesbarkeit skaliert werden kann (ohne unterstützende Technologien wie eine Zoomfunktion).

• MDN Understanding WCAG, Leitfaden 1.4 Erläuterungen
• Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0

Beispiele

Festlegen einer maximalen Größe für ein Label und ein Eingabefeld

Ein weiterer Anwendungsfall für min() ist das Setzen einer maximalen Größe bei responsiven Formularelementen: Dadurch können die Breiten von Labels und Eingabefeldern verkleinert werden, wenn 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 wird das Formular selbst, zusammen mit Rand, Rahmen und Auffüllung, 100% der Breite seines übergeordneten Elements sein. Wir deklarieren, dass das Eingabefeld und das Label entweder 40% der Formularbreite ausfüllen oder bis zu 400px breit sein können, je nachdem, welches kleiner ist. Mit anderen Worten, die größte Breite, die das Label und Eingabefeld haben können, ist 400px. Die kleinste 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>

Spezifikationen

Browser-Kompatibilität

Siehe auch

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