max()
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 max()
CSS Funktion ermöglicht es Ihnen, den größten (am positivsten) Wert aus einer Liste von komma-getrennten Ausdrücken als Wert einer CSS-Eigenschaft zu setzen. Die max()
-Funktion kann überall dort verwendet werden, wo ein <length>
, <frequency>
, <angle>
, <time>
, <percentage>
, <number>
oder <integer>
erlaubt ist.
Probieren Sie es aus
Im ersten oben gezeigten Beispiel wird die Breite mindestens 400px betragen, aber breiter sein, wenn der Viewport mehr als 2000px breit ist (in diesem Fall wäre 1vw 20px, sodass 20vw 400px wären). Diese Technik verwendet eine absolute Einheit, um einen festen Mindestwert für die Eigenschaft festzulegen, und eine relative Einheit, um den Wert an größere Viewports anpassen zu lassen.
Syntax
Die max()
-Funktion nimmt ein oder mehrere komma-getrennte Ausdrücke als Parameter, wobei der größte (am positivsten) Ausdruckswert als Wert der zugewiesenen Eigenschaft verwendet wird.
Die Ausdrücke können mathematische Ausdrücke (unter Verwendung arithmetischer Operatoren), literale Werte oder andere Ausdrücke wie attr()
sein, die zu einem gültigen Argumenttyp auswerten (wie <length>
), oder verschachtelte min()
und max()
-Funktionen.
Sie können verschiedene Einheiten für jeden Wert in Ihrem Ausdruck verwenden. Sie können auch Klammern verwenden, um die Berechnungsreihenfolge bei Bedarf festzulegen.
Hinweise
- Mathematische Ausdrücke mit Prozentangaben für Breiten und Höhen bei Tabellen-Spalten, Tabellen-Spaltengruppen, Tabellen-Zeilen, Tabellen-Zeilengruppen und Tabellen-Zellen in sowohl automatischen als auch festgelegten Layout-Tabellen könnten so behandelt werden, als wäre
auto
angegeben. - Es ist erlaubt,
min()
und anderemax()
-Funktionen als Ausdruckswerte zu verschachteln. Die Ausdrücke sind volle mathematische Ausdrücke, sodass Sie direkte Addition, Subtraktion, Multiplikation und Division ohne die Verwendung dercalc()
-Funktion selbst nutzen können. - Der Ausdruck kann Werte enthalten, die die Operatoren Addition ( + ), Subtraktion ( - ), Multiplikation ( * ) und Division ( / ) kombinieren, wobei die Standardregeln für die Operatorrangfolge gelten. Stellen Sie sicher, dass Sie auf jeder Seite der + und - Operanden ein Leerzeichen setzen. Die Operanden im Ausdruck können jedem <length>-Syntaxwert entsprechen.
- Sie können (und müssen häufig)
min()
- undmax()
-Werte kombinieren odermax()
innerhalb einerclamp()
- odercalc()
-Funktion verwenden.
Formale Syntax
Barrierefreiheit
Wenn max()
zur Steuerung der Textgröße verwendet wird, stellen Sie sicher, dass der Text immer groß genug ist, um gelesen zu werden. Ein Vorschlag ist, die min()
-Funktion innerhalb eines max()
zu verschachteln, das als zweiten Wert eine relative Längeneinheit hat, die immer groß genug ist, um gelesen zu werden. Zum Beispiel:
small {
font-size: max(min(0.5vw, 0.5em), 1rem);
}
Dies stellt eine Mindestgröße von 1rem sicher, mit einer Textgröße, die skaliert, wenn die Seite vergrößert wird.
Beispiele
Festlegen einer Mindestgröße für eine Schriftart
Ein weiterer Anwendungsfall für max()
ist das Ermöglichen, dass eine Schriftgröße wächst, während sichergestellt wird, dass sie mindestens eine Mindestgröße hat, um reaktionsfähige Schriftgrößen zu ermöglichen und die Lesbarkeit zu gewährleisten.
Betrachten wir etwas CSS:
h1 {
font-size: 2rem;
}
h1.responsive {
font-size: max(4vw, 2em, 2rem);
}
Die Schriftgröße beträgt mindestens 2rems oder das Doppelte der Standardschriftgröße der Seite. Dies stellt sicher, dass sie lesbar und barrierefrei ist.
<h1>This text is always legible, but doesn't change size</h1>
<h1 class="responsive">
This text is always legible, and is responsive, to a point
</h1>
Denken Sie an die max()
-Funktion als eine Möglichkeit, den minimal erlaubten Wert für eine Eigenschaft zu finden.
Spezifikationen
Specification |
---|
CSS Values and Units Module Level 4 # calc-notation |
Browser-Kompatibilität
BCD tables only load in the browser