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

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

Dowiedz się, jak kontrolować rozmiar elementów, zachowywać prawidłowe odstępy i wdrażać elastyczną typografię za pomocą tych dobrze obsługiwanych funkcji CSS.

Una Kravets

W miarę jak projektowanie responsywne staje się coraz bardziej złożone, CSS nieprzerwanie ewoluuje, zwiększyliśmy kontrolę. min(), max() i funkcje clamp(), obsługiwanych obecnie we wszystkich nowoczesnych przeglądarkach, należą do najnowszych narzędzi tworzenie bardziej dynamicznych i elastycznych stron internetowych i aplikacji. Możesz użyć tych do kontrolowania rozmiaru i rozmiaru elementów oraz zachowania odstępów między oraz tworzyć elastyczną i płynną typografię.

W funkcjach matematycznych calc(), min(), max() i clamp() można używać wyrażeń matematycznych z dodawaniem (+, odejmowaniem (-)), mnożeniem (*) i dzieleniem (/) jako wartości składowych
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żyć min(), max() i clamp() po prawej stronie dowolnej usługi porównywania cen gdzie ma sens. W przypadku usług min() i max() podajesz: z listy argumentów, a przeglądarka określa, która z nich jest najmniejszą lub największą. Na przykład w przypadku ciągu width: min(1rem, 50%, 10vw), przeglądarka oblicza, która z tych względnych jednostek jest najmniejsza, i używa i ustawić tę wartość szerokości elementu.

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

Funkcja max() robi to samo w przypadku wartości maksymalnej.

Funkcja max() wybiera wartość z listy opcji w tej Prezentacja Codepen.

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

Funkcja clamp() utrzymuje wartość między określonym minimum znajdziesz maksimum w tej wersji demonstracyjnej Codepen.

Funkcji tych możesz używać wszędzie tam, gdzie znajdują się: <length>, <frequency>, Dozwolone wartości: <angle>, <time>, <percentage>, <number> i <integer>. Ty mogą korzystać z nich samodzielnie (tak jak w usłudze font-size: max(0.5vw, 50%, 2rem)), a przy tym calc() (jak w font-size: max(calc(0.5vw - 1em), 2rem)) lub skomponowane (na przykład font-size: max(min(0.5vw, 1em), 2rem)).

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

Idealna szerokość

Według The Elements of Typographic Styl przez Roberta Bringhursta: „wszystko od 45 do 75 znaków jest powszechnie uznawane wystarczająca długość wiersza dla strony jednokolumnowej ustawionej w płaszczyźnie tekstu szeryfowej w rozmiarze tekstu”.

Aby bloki tekstu miały od 45 do 75 znaków szerokości, użyj clamp() i ch (0-width przejście znaku) jednostka:

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

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

Użyj funkcji clamp() do ustawienia minimalnej i maksymalnej szerokości. Zobacz demonstrację w Codepen.

Możesz też podzielić ten fragment za pomocą parametru min() lub max(). Jeśli chcesz, aby atrybut element ma zawsze szerokość 50% i nie przekraczał 75ch szerokości na większej użyj 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 atrybutu max() funkcji, na przykład width: max(45ch, 50%);. Przeglądarka wybiera w tym miejscu jest większa, co oznacza, że element musi mieć co najmniej 45ch.

Użyj funkcji max(), aby ustawić minimalną szerokość.

Zarządzaj dopełnieniem

Za pomocą max() możesz też ustawić minimalny rozmiar dopełnienia. Ten przykład pochodzi z sztuczki CSS, w której czytelnik Caluò de Lacerda Pataca podzielił się swoim pomysłem: Niech żywioł ma dodatkowe dopełnienie w przypadku większych ekranów, ale pozostaw minimalne dopełnienie przy mniejszym rozmiarów ekranu. W tym celu użyj funkcji calc() lub max() i odejmij minimalną wartość dopełnienie po obu stronach elementu: calc((100vw - var(--contentWidth)) / 2), lub max(2rem, 50vw - var(--contentWidth) / 2). W arkuszu stylów wygląda tak:

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

, Ustaw minimalne dopełnienie komponentu za pomocą funkcji max(). Zobacz demonstrację w Codepen.

Typografia płynna

Aby włączyć typową typografię: Mike Riethmeuller spopularyzował technikę używająca funkcji clamp() do ustawiania minimalnego i maksymalnego rozmiaru czcionki i umożliwia skalowanie między tymi rozmiarami.

Aby utworzyć elastyczną typografię, użyj funkcji clamp(). Zobacz demonstrację w Codepen.

Przed clamp(), zaprojektowaniem skalowania czcionek wymagało ciągów złożonych stylów. Teraz, możesz pozwolić, by przeglądarka zrobiła to za Ciebie. Ustaw minimalną akceptowaną czcionkę rozmiar (na przykład 1.5rem w przypadku tytułu), maksymalny rozmiar (np. 3rem) oraz idealny rozmiar (np. 5vw). Teraz masz typografię, która skaluje się razem z do szerokości widocznego obszaru do momentu osiągnięcia granicy wartości minimalnej i maksymalnej, stosując metodę bardzo mało kodu:

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

Więcej zasobów

Zdjęcie okładki od @yer_a_wizard w Odchylenie.