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 anderemin()
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 dercalc()
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()
undmax()
Werte kombinieren odermin()
innerhalb einerclamp()
odercalc()
Funktion verwenden. - Sie können mehr als zwei Argumente bereitstellen, wenn Sie mehrere Einschränkungen anwenden möchten.
Formale Syntax
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:
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.
<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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
min() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support