min()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Die min() CSS Funktion ermöglicht es Ihnen, den kleinsten (am negativsten) Wert aus einer Liste von durch Kommas getrennten Ausdrücken als Wert einer CSS-Eigenschaft festzulegen. Die min() Funktion kann überall dort verwendet werden, wo ein <length>, <frequency>, <angle>, <time>, <percentage>, <number> oder <integer> erlaubt ist.

Probieren Sie es aus

Im obigen ersten Beispiel wird die Breite höchstens 200px betragen, sie wird jedoch kleiner sein, wenn das Ansichtsfenster 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 anzugeben, und eine relative Einheit, damit der Wert schrumpfen kann, um sich kleineren Ansichtsfenstern anzupassen.

Syntax

Die min() Funktion nimmt ein oder mehrere durch Kommas getrennte Ausdrücke als Parameter, wobei das kleinste (am negativsten) Ergebnisausdruckswert als Wert genutzt wird.

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

Sie können in Ihren Ausdrücken unterschiedliche Einheiten für jeden Wert verwenden, wenn Sie möchten. Sie können auch Klammern verwenden, um die Reihenfolge der Berechnung festzulegen, wenn nötig.

Hinweise

  • Mathematische Ausdrücke, die Prozentsätze für Breiten und Höhen bei Tabellen-Spalten, Tabellen-Spaltengruppen, Tabellenzeilen, Tabellenzeilengruppen und Tabellenzellen in sowohl automatischen als auch festen Layout-Tabellen beinhalten, 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 ohne die Verwendung der calc() Funktion selbst einsetzen können.
  • Der Ausdruck kann Werte kombinieren, unter Verwendung der Operatoren Addition ( + ), Subtraktion ( - ), Multiplikation ( * ) und Division ( / ), unter Anwendung der Standardvorrangregeln der Operatoren. Achten Sie darauf, auf jeder Seite der + und - Operanden ein Leerzeichen zu setzen. Die Operanden im Ausdruck dürfen jeden <length> Syntaxwert darstellen.
  • 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ö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 immer noch mindestens 200% für die Lesbarkeit skaliert werden kann (ohne unterstützende Technologien wie eine Zoom-Funktion).

Beispiele

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

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

Schauen wir uns etwas CSS an:

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;
}

Hiermit wird das Formular selbst, zusammen mit dem Abstand, der Rand und die Innenabstände, 100% der Breite seines Elternteils einnehmen. Wir deklarieren, dass das Eingabefeld und Label entweder 40% der Formularbreite bis zu den Innenabständen oder bis zu 400px breit sein soll, je nachdem was kleiner ist. Anders gesagt, die größte Breite, die das Label und das Eingabefeld erreichen können, beträgt 400px. Die kleinste Breite, die sie haben werden, beträgt 40% der Formularbreite, was auf einem Smartwatch-Bildschirm sehr klein ist.

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

Spezifikationen

Specification
CSS Values and Units Module Level 4
# calc-notation

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
min()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch