Ta strona została przetłumaczona przez Cloud Translation API.

CSS min(), max() i clamp()

Dowiedz się, jak kontrolować rozmiar elementów, zachować odpowiedni odstęp i wdrażać płynną typografię, korzystając z tych dobrze obsługiwanych funkcji CSS.

Una Kravets

Wraz z rozwojem elastycznego układu, język CSS jest stale udoskonalany, aby zapewnić autorom większą kontrolę. Funkcje min(), max() i clamp(), obsługiwane obecnie we wszystkich nowoczesnych przeglądarkach, należą do najnowszych narzędzi, które sprawiają, że tworzenie stron internetowych i aplikacji jest bardziej dynamiczne i responsywne. Za pomocą tych funkcji możesz kontrolować rozmiar i rozmiar elementów, zachowywać odstępy między elementami oraz tworzyć elastyczną i płynną typografię.

Funkcje matematyczne calc(), min(), max() i clamp() umożliwiają używanie wyrażeń matematycznych z dodawaniem (+), odejmowaniem (-), mnożeniem (*) i dzieleniem (/) jako wartości komponentów.
Wartości i jednostki CSS – poziom 4

Obsługa przeglądarek

`min()`

Obsługa przeglądarek

Źródło

`max()`

Obsługa przeglądarek

Źródło

`clamp()`

Obsługa przeglądarek

Źródło

Wykorzystanie

Możesz używać wartości min(), max() i clamp() po prawej stronie dowolnego wyrażenia CSS, w którym ma to sens. W przypadku min() i max() podajesz listę argumentów z wartościami, a przeglądarka określa, która z nich jest najmniejsza lub największa. Na przykład w przypadku width: min(1rem, 50%, 10vw) przeglądarka oblicza, która z tych jednostek względnych jest najmniejsza, i używa tej wartości do szerokości elementu.

Funkcja min() wybiera minimalną wartość z listy opcji w tym Codepen demo.

Funkcja max() działa podobnie w przypadku wartości maksymalnej.

Funkcja max() wybiera wartość z listy opcji w tym demo Codepen.

Aby użyć funkcji clamp(), wpisz 3 wartości: minimalną, idealną do obliczenia wartości i wartość maksymalną.

Funkcja clamp() utrzymuje swoją wartość między określonym minimum a maksymalnym w tej wersji demonstracyjnej Codepen.

Możesz używać tych funkcji w dowolnym miejscu, w którym dozwolone są funkcje <length>, <frequency>, <angle>, <time>, <percentage>, <number> lub <integer>. Możesz ich używać samodzielnie (jak w przypadku font-size: max(0.5vw, 50%, 2rem)), z użyciem calc() (jak w przypadku font-size: max(calc(0.5vw - 1em), 2rem)) lub w kompozycji (jak w przypadku font-size: max(min(0.5vw, 1em), 2rem)).

Poniżej przedstawiliśmy kilka przykładów użycia tych funkcji.

Idealna szerokość

Według książki The Elements of Typographic Style Roberta Bringhursta „cokolwiek od 45 do 75 znaków jest powszechnie uznawane za wystarczającą długość wiersza w przypadku strony z jedną kolumną w czcionce szeryfowej o określonym rozmiarze tekstu”.

Aby mieć pewność, że bloki tekstu będą miały od 45 do 75 znaków szerokości, użyj clamp() i ch (character advance o szerokości 0) jako jednostki:

p {
  width: clamp(45ch, 50%, 75ch);
}

Dzięki temu przeglądarka może określić szerokość akapitu. Domyślnie szerokość jest ustawiona na 50%. Jeśli wartość 50% jest mniejsza niż 45ch, szerokość jest ustawiona jako 45ch, a jeśli 50% jest szersza niż 75ch, używana jest wartość 75ch.

Używaj funkcji clamp() do ustawiania minimalnej i maksymalnej szerokości. Zobacz wersję demonstracyjną na Codepen

Możesz też podzielić ten fragment za pomocą parametru min() lub max(). Jeśli chcesz, aby element zawsze miał szerokość 50% i nie przekraczał szerokości 75ch na większych ekranach, użyj wartości width: min(75ch, 50%);, aby ustawić maksymalny rozmiar.

Użyj funkcji min(), aby ustawić maksymalną szerokość.

W ten sam sposób możesz ustawić minimalny rozmiar czytelnego tekstu, używając funkcji max(), jak w przypadku width: max(45ch, 50%);. Tutaj przeglądarka wybiera wartość, która jest większa, co oznacza, że element musi mieć szerokość 45ch lub większą.

Aby ustawić minimalną szerokość, użyj funkcji max().

Zarządzanie wypełnieniem

Za pomocą max() możesz też ustawić minimalny rozmiar dopełnienia. Ten przykład pochodzi z CSS Tricks, w którym czytelnik Caluò de Lacerda Pataca podzielił się tym pomysłem: umieść w elemencie dodatkowe dopełnienie na większych ekranach, ale zachowaj minimalne dopełnienie przy mniejszych ekranach. Aby to zrobić, użyj właściwości calc() lub max() i odejmij minimalne dopełnienie od obu stron elementu: calc((100vw - var(--contentWidth)) / 2) lub max(2rem, 50vw - var(--contentWidth) / 2). W arkuszu stylów powinno to wyglądać tak:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

Ustaw minimalne wypełnienie dla komponentu za pomocą funkcji max(). Zobacz wersję demonstracyjną na Codepen

Typografia płynna

Aby umożliwić korzystanie z elastycznej typografii, Mike Riethmeuller spopularyzował technikę, która wykorzystuje funkcję clamp() do ustawienia minimalnego i maksymalnego rozmiaru czcionki oraz umożliwienie skalowania między tymi rozmiarami.

Aby tworzyć płynną typografię, użyj funkcji clamp(). Zobacz wersję demonstracyjną na Codepen

Przed clamp(), zaprojektowaniem skalowania czcionek wymagało ciągów złożonych stylów. Teraz możesz pozwolić przeglądarce wykonać za Ciebie pracę. Ustaw minimalny dopuszczalny rozmiar czcionki (np. 1.5rem dla tytułu), maksymalny rozmiar (np. 3rem) i idealny rozmiar (np. 5vw). Teraz masz typografię, która dostosowuje się do szerokości viewportu strony, aż do osiągnięcia ograniczających wartości minimalnych i maksymalnych, przy użyciu bardzo małej ilości kodu:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Więcej zasobów

Zdjęcie okładki z @yer_a_wizard na Unsplash.