Kalkulator CSS clamp()
Wprowadź rozmiar dla małych i dużych ekranów, aby uzyskać płynną wartość clamp(), która idealnie skaluje się pomiędzy nimi — dla czcionek, paddingów lub marginesów.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Wynik zachowuje jednostkę rem w środkowym członie wyrażenia, dzięki czemu tekst prawidłowo powiększa się przy powiększeniu strony do 200% (czysta wartość oparta na viewport by to uniemożliwiła).
Płynny tekst o idealnym rozmiarze.
Wszystkie obliczenia są wykonywane w Państwa przeglądarce. Żadne wprowadzane dane nie są przesyłane do BroBroGo.
FAQ
Jak kalkulator generuje wartość clamp()?
Podaje się dwa punkty odniesienia: rozmiar przy małym ekranie oraz rozmiar przy dużym ekranie. Kalkulator wyznacza linię trendu pomiędzy nimi, dzięki czemu rozmiar rośnie płynnie wraz z szerokością ekranu, a następnie ujmuje całość w funkcję clamp(), która zapobiega spadkowi poniżej minimum lub wzrostowi powyżej maksimum. Pomiędzy tymi szerokościami rozmiar skaluje się płynnie.
Dlaczego wynik korzysta z rem i vw zamiast pikseli?
Wartości graniczne są wyrażone w rem, a zmienna część środkowa zawiera komponent rem, dzięki czemu tekst skaluje się poprawnie, gdy użytkownik powiększa widok lub zmienia domyślny rozmiar czcionki w przeglądarce. Wprowadzasz wartości w pikselach, ponieważ tak jest najwygodniej, a narzędzie przelicza je na rem na podstawie bazowego rozmiaru czcionki.
Czy mogę używać tego narzędzia do odstępów, a nie tylko do rozmiaru pisma?
Tak. Ta sama wartość sprawdzi się dla paddingu, marginesu, odstępu (gap), szerokości czy wysokości — wszędzie tam, gdzie definiuje się wymiary. Przełącz podgląd na tryb „Pole”, aby zobaczyć, jak skalują się odstępy zamiast tekstu. Jeśli rozmiar minimalny i maksymalny są identyczne, wynik uprości się do zwykłej stałej wartości.
Czy wszystkie przeglądarki obsługują clamp()?
Tak — wszystkie nowoczesne przeglądarki obsługują funkcję clamp() od 2020 roku, więc można stosować wygenerowaną wartość bezpośrednio. Przy bardzo dużych wartościach maksymalnych warto jednak upewnić się przy powiększeniu 200%, czy tekst nadal skaluje się poprawnie dla osób niedowidzących.