Funkcja clamp() w CSS
Funkcja clamp() w CSS to wygodna i nowoczesna metoda CSS służąca do uzyskania precyzyjnej, a zarazem ale elastycznej kontroli nad wyglądem stylowanych elementów. Użycie tej funkcji polega na podaniu trzech parametrów, a ona już sama przeliczy wielkość danego elementu.
Funkcja clamp()
to wygodna i nowoczesna metoda CSS służąca do uzyskania precyzyjnej, a zarazem ale elastycznej kontroli nad wyglądem stylowanych elementów. Użycie tej funkcji polega na podaniu trzech parametrów, a ona już sama przeliczy wielkość danego elementu.

Do tworzenia elastycznych, responsywnych stron www wykorzystujemy przeróżne funkcje i właściwości styli CSS. Jedną z nich jest funkcja clamp()
, którą wykorzystujemy do określania wielkości elementu.
Zastosowanie
Funkcję clamp()
możemy wykorzystać właściwie w każdej właściwości, która przyjmuje wartości liczbowe. Poza funkcją clamp()
, mamy do dyspozycji funkcje min()
i max()
, jednak nie są tak uniwersalne.
Funkcje min() oraz max()
Oto przykłady ich zastosowania:
width: min(50%, 650px); // #1
width: max(50%, 650px); // #2
Powyższy kod #1 oznacza, że szerokość kontenera będzie maksymalnie 650px oraz minimalnie 50% jego szerokości. Natomiast kod #2 oznacza, iż kontener będzie miał minimalnie 650px oraz więcej niż 50% szerokości.
Funkcja clamp()
Dobrodziejstwa dwóch powyższych funkcji łączy clamp()
.
width: clamp(300px, 50vw, 750px);
Zatem, ta konstrukcja ograniczy nam szerokość kontenera na zasadzie – połowa okna przeglądarki, nie mniejsza niż 300px i nie większa niż 750px. Super, tego nam było trzeba!