Kalkulator clamp() CSS

Podaj rozmiar, jaki ma obowiązywać na małym ekranie, rozmiar dla dużego ekranu oraz dwie szerokości viewportu pomiędzy nimi. Narzędzie wyliczy wartość clamp(), która prowadzi prostą między tymi punktami, i pokaże rozmiar przy siedmiu typowych szerokościach. Zdanie w podglądzie naprawdę korzysta z wygenerowanej wartości, więc zmienia się przy zmianie szerokości okna.

Czy moje dane są gdzieś wysyłane?

Nie. To wyłącznie arytmetyka wykonywana w przeglądarce. Wpisane liczby nigdy nie trafiają na serwer, a za wynikiem nie stoi żadne konto, log ani zapytanie sieciowe.

Jak działa ta matematyka?

clamp() przyjmuje trzy wartości: minimum, wartość preferowaną i maksimum. Przeglądarka używa wartości preferowanej, ale nie pozwoli jej spaść poniżej minimum ani wzrosnąć powyżej maksimum.

Najciekawsza jest wartość preferowana. Musi rosnąć razem z viewportem, a od tego są jednostki vw: 1vw to jeden procent szerokości viewportu. Aby przejść z 16px przy viewporcie 320px do 48px przy 1280px, rozmiar musi urosnąć o 32px na przestrzeni 960px szerokości, czyli 0,0333px na piksel, a to daje 3.3333vw. Samo nachylenie trafiałoby jednak w złe rozmiary, więc stałe przesunięcie ustawia prostą we właściwym miejscu. Wychodzi clamp(1rem, 0.3333rem + 3.3333vw, 3rem) i to właśnie przesunięcie sprawia, że środkowy człon ma dwie części.

Liczby są zaokrąglane do czterech miejsc po przecinku, a końcowe zera znikają, więc dostajesz 1.5rem, a nie 1.5000rem. Rozmiary wpisuje się w pikselach; zmiana jednostki wyniku na rem dzieli je przez bazowy rozmiar czcionki, który w domyślnych ustawieniach każdej przeglądarki wynosi 16px.

Co, jeśli liczby nie mają sensu?

Narzędzie ostrzega, zamiast po cichu podawać zły wynik. Jeśli obie szerokości viewportu są takie same, nie ma zakresu do skalowania: rozmiar pozostaje stały, a człon vw znika. Gdy rozmiar minimalny i maksymalny są równe, ostrzeżenie pojawia się z tego samego powodu.

Najbardziej zdradliwy przypadek to minimum większe od maksimum. CSS rozwiązuje clamp() jako max(MIN, min(VALUE, MAX)), więc wygrywa minimum, a rozmiar zostaje na nim przypięty na zawsze. Przeglądarki robią to bez słowa. Tabela podglądu pokazuje przypiętą wartość, a ostrzeżenie tłumaczy dlaczego.

Gdzie się to przydaje?

Nagłówki, które na komputerze mają być duże, a na telefonie czytelne; odstępy sekcji, które nie mogą zostać przy 8rem na ekranie 375px; przerwy w siatce kart; tekst nagłówkowy, który ma wypełniać swoje miejsce przy każdej szerokości.