max()
Wybiera największą z podanych wartości. Działa jak dolny limit, np. odstęp 5% szerokości, ale nigdy mniej niż 16px.
Przykład
#.search {
width: max(50%, 240px);
}<div class="stage" style="display: flex; flex-wrap: wrap; align-items: center; gap: 10px;">
<input class="search" type="search" placeholder="Szukaj w dokumentacji" aria-label="Szukaj w dokumentacji" style="padding: 8px 12px; border: 1px solid #3f3f46; border-radius: 10px; background: #18181b; color: inherit; font: inherit;">
<button type="button" style="padding: 8px 14px; border: 0; border-radius: 10px; background: #7c3aed; color: #fff; font: inherit;">Szukaj</button>
</div>Na komputerze pole zajmuje połowę szerokości. Na telefonie połowa to za mało, więc wygrywa 240 px, a przycisk przechodzi do następnego wiersza.
Definicja i zastosowanie
#Funkcja max() zwraca największą z wartości podanych po przecinku. W praktyce ustala dolną granicę: padding: max(16px, 5%) daje 5% szerokości rodzica, ale nigdy mniej niż 16 pikseli, więc na wąskim ekranie treść nie przyklei się do krawędzi.
Tak jak przy min(), nazwa bywa myląca: max() nie ustawia maksimum, tylko minimum. Zapis width: max(50%, 300px) odpowiada parze width: 50%; min-width: 300px;. Argumentów może być więcej niż dwa, a w każdym wolno pisać działania i używać zmiennych.
Dobry przykład to telefony z wycięciem w ekranie. Przy viewport-fit=cover w znaczniku viewport zapis padding-left: max(1rem, env(safe-area-inset-left)) zachowuje zwykły odstęp, ale powiększa go tam, gdzie krawędź zasłania wycięcie aparatu. Przy tekście max() pilnuje czytelności: font-size: max(1rem, 2vw) nie pozwoli literom zmaleć poniżej rozmiaru bazowego.
Składnia
#max(<wartość>, <wartość> [, <wartość>]*)Typowe zastosowania
#60%, w wąskiej ramce 120px
Dolny limit szerokości. W szerokiej ramce kafelek ma 60% jej szerokości. Przeciągnij prawy dolny róg w lewo: gdy 60% zrobi się mniejsze niż 120 px, kafelek przestaje maleć.7cqi, w wąskiej ramce 14px
Tekst skaluje się z szerokością kontenera, ale nie spada poniżej 14 px. Zwężaj ramkę i obserwuj, jak napis maleje, a potem się zatrzymuje.5cqi, w wąskiej ramce 8px
Odstęp wewnętrzny rośnie razem z kontenerem, ale nigdy nie spada poniżej 8 px, więc tekst nie dotknie krawędzi kafelka.
Typowe zastosowania w praktyce
#max(60%, 120px)
.demo { width: max(60%, 120px); }max(14px, 7cqi)
.demo { font-size: max(14px, 7cqi); }max(8px, 5cqi)
.demo { padding: max(8px, 5cqi); }Obsługa przeglądarek
#Szeroko dostępne · od 2020 roku
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Wynik
max()jest zawsze co najmniej tak duży jak każdy z argumentów, więc funkcja działa jak dolny limit. - Gdy potrzebujesz naraz dolnego i górnego limitu, zamiast zagnieżdżać
max()imin()użyjclamp(). - Przy rozmiarach tekstu w
vwdodaj dolny limit wrem, np.max(1rem, 2.5vw), żeby na telefonie litery nie robiły się za małe.
Powiązane hasła
#- min()Wybiera najmniejszą z podanych wartości. Działa jak górny limit, np. szerokość 100% rodzica, ale nie więcej niż 600px.
- clamp()Trzyma wartość w przedziale od minimum do maksimum, a pomiędzy pozwala jej płynnie rosnąć. Podstawa płynnej typografii.
- calc()Wylicza wartość z działania matematycznego i pozwala łączyć różne jednostki, na przykład procenty z pikselami.
- min-widthUstala minimalną szerokość, poniżej której element się nie zwęży.
- paddingUstawia wewnętrzny odstęp między treścią a obramowaniem.
- JednostkiPrzegląd jednostek długości w CSS: od stałych pikseli, przez em i rem zależne od czcionki, po jednostki okna, kontenera i siatki.
Widzisz błąd albo brakuje przykładu? Napisz do nas.