min() CSS-Funktion

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 beträgt die Breite maximal 200px, wird jedoch kleiner, wenn der Ansichtsbereich weniger als 400px breit ist (in diesem Fall würde 1vw 4px entsprechen, also würden 50vw 200px sein). Diese Technik verwendet eine absolute Einheit, um einen festen Maximalwert für die Eigenschaft festzulegen, und eine relative Einheit, um den Wert an kleinere Ansichtsbereiche anzupassen.

Syntax

min(1, 2, 3)
min(1px, 2px, 3px)

Parameter

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

Die Ausdrücke können mathematische Ausdrücke (mit arithmetischen Operatoren), wörtliche 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 dies wünschen. Sie können auch Klammern verwenden, um die Reihenfolge der Berechnungen festzulegen, wenn dies erforderlich ist.

Hinweise

• Mathematische Ausdrücke, die Prozentwerte für Breiten und Höhen auf Tabellenspalten, Tabellenspalten-Gruppen, Tabellenzeilen, Tabellenzeilen-Gruppen und Tabellenzellen in sowohl automatischen als auch festen Layout-Tabellen beinhalten, 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 ohne Verwendung der calc()-Funktion selbst verwenden können.
• Der Ausdruck kann Werte enthalten, die die Operatoren Addition ( + ), Subtraktion ( - ), Multiplikation ( * ) und Division ( / ) kombinieren, unter Verwendung der Standardvorrangregeln für Operatoren. Stellen Sie sicher, dass Sie ein Leerzeichen auf jeder Seite der + und - Operanden setzen. Die Operanden im Ausdruck können jeden <length>-Syntaxwert einnehmen.
• Sie können (und müssen häufig) 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öchten.

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 festzulegen, stellen Sie sicher, dass die Schriftgröße mindestens um 200% skaliert werden kann, um die Lesbarkeit zu gewährleisten (ohne unterstützende Technologien wie eine Zoom-Funktion).

• MDN Verständnis von WCAG, Leitlinie 1.4 Erklärungen Verständnis des Erfolgskriteriums 1.4.4: Text vergrößern | WAI | W3C

Beispiele

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

Ein weiterer Anwendungsfall für min() ist das Festlegen einer maximalen Größe für responsive Formularelemente: Dadurch können die Breiten von Etiketten und Eingabefeldern schrumpfen, wenn die Breite des Formulars abnimmt.

Schauen wir uns einige CSS-Beispiele 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, das Formular selbst, zusammen mit dem Rand, dem Rahmen und dem Innenabstand, wird 100% der Breite seines übergeordneten Elements sein. Wir legen fest, dass das Eingabefeld und das Etikett die kleinere von 40% der Formularbreite bis zum Innenabstand oder 400px breit sind, je nachdem, welches kleiner ist. Mit anderen Worten, die maximale Breite, die das Etikett und das Eingabefeld haben können, beträgt 400px. Die minimale Breite beträgt 40% der Breite des Formulars, 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