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 obigen ersten Beispiel wird die Breite höchstens 200px betragen, aber sie wird kleiner sein, wenn der Viewport weniger als 400px breit ist (in diesem Fall wären 1vw 4px, daher 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 an kleinere Viewports anzupassen.

Syntax

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

Parameter

Die min()-Funktion nimmt einen oder mehrere durch Kommas getrennte Ausdrücke als Parameter, wobei der kleinste (am meisten negative) 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 (wie <length>) auswerten.

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 erforderlich.

Hinweise

• Mathematische Ausdrücke mit Prozentangaben für Breiten und Höhen bei Tabellen-Spalten, Tabellen-Spaltengruppen, Tabellen-Zeilen, Tabellen-Zeilengruppen und Tabellenzellen in sowohl automatischen als auch festen Layout-Tabellen 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 Addition, Subtraktion, Multiplikation und Division direkt verwenden können, ohne die calc()-Funktion selbst zu benutzen.
• Der Ausdruck kann Werte kombinieren, die die Addition (+), die Subtraktion (-), die Multiplikation (*) und die Division (/) Operatoren verwenden, unter Verwendung standardmäßiger Operatorvorrangregeln. Achten Sie darauf, auf jeder Seite der + und - Operanden ein Leerzeichen zu setzen. Die Operanden im Ausdruck können jeden <length>-Syntaxwert sein.
• 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 Beschrä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 Schrift noch mindestens 200% für die Lesbarkeit skaliert werden kann (ohne unterstützende Technologien wie eine Zoomfunktion).

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

Beispiele

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

Ein weiterer Anwendungsfall für min() ist das Festlegen einer maximalen Größe für responsive Formularsteuerungen: Dadurch können sich die Breiten von Labels und Eingaben verkleinern, wenn die Breite des Formulars schrumpft.

Werfen wir einen Blick auf einige CSS-Beispiele:

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 zusammen mit dem Rand, der Rahmen und das Padding 100% der Breite des übergeordneten Elements. Wir deklarieren, dass das Eingabefeld und das Label zu höchstens 40% der Formularbreite bis zu Padding oder 400px breit sind, je nachdem, welches kleiner ist. Mit anderen Worten, die größte Breite, die das Label und das Eingabefeld erreichen 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