Tekst, który skaluje się bez media queries
Nagłówek o rozmiarze 16 px na telefonie i 32 px na komputerze wymagał dawniej dwóch lub trzech punktów przerwania. Z clamp() wystarczy jedna linijka: rozmiar rośnie płynnie z ekranem między dolną a górną granicą. Trudna jest wartość środkowa, mieszanka stałego rozmiaru i procentu szerokości ekranu. Ten generator wylicza ją z dwóch rozmiarów, na których ci zależy.
Wartość clamp() w czterech krokach
- Wpisz najmniejszy i największy rozmiar, na przykład 16 i 32.
- Wpisz szerokości ekranu, przy których każdy obowiązuje, na przykład 320 i 1280 pikseli.
- Wybierz px lub rem oraz, jeśli twoja strona zmienia bazowy rozmiar czcionki, liczbę pikseli w 1rem. Wybierz właściwość CSS, aby dostać gotową deklarację.
- Skopiuj wartość lub deklarację. Tabela i suwak pokazują rozmiar przy każdej szerokości pośredniej.
Co robią trzy części clamp()
Wynik wygląda jak clamp(1rem, 0.6667rem + 1.6667vw, 2rem). Pierwsza wartość to najmniejszy rozmiar, jaki może przyjąć właściwość, ostatnia to największy, a środkowa to prosta między nimi. Narzędzie, zamiast kazać ci rozwiązywać równanie, liczy nachylenie jako różnicę rozmiarów podzieloną przez różnicę szerokości, a część stałą z miejsca, w którym ta prosta przecina szerokość ekranu równą zero. Gdy rozmiar ma maleć na dużych ekranach, narzędzie stawia na początku mniejszą wartość, bo clamp() zawsze oczekuje minimum jako pierwszego.
Dzięki rem zoom nadal działa
Rozmiary w rem podążają za rozmiarem czcionki ustawionym przez odwiedzającego w przeglądarce, wartości w px nie. Rozmiar wyłącznie w vw całkowicie ignoruje zoom, co może nie przejść kontroli dostępności. Połączenie części w rem z częścią w vw, jak robi to to narzędzie przy rozmiarach w rem, pozostawia tekst skalowalnym. Sprawdź projekt przy powiększeniu 200 % i nie pozwól, by największy rozmiar przekraczał około dwu i pół raza najmniejszy.
Nic nie opuszcza przeglądarki
Wartości są liczone na stronie, bez serwera. Generator nie wysyła żądań sieciowych i niczego nie zapisuje.