Generator CSS clamp()

Generator CSS clamp(): płynne rozmiary czcionek i odstępy | We.Inc

Darmowy generator CSS clamp(). Ustaw rozmiar minimalny i maksymalny oraz szerokości ekranu pomiędzy nimi, aby otrzymać CSS z płynnym font-size lub odstępami, które skalują się łagodnie.

Generator CSS clamp()

Podaj rozmiar dla małych ekranów, rozmiar dla dużych ekranów i szerokości ekranu, przy których każdy z nich ma obowiązywać, a otrzymasz jedną linię clamp(), która płynnie rośnie pomiędzy nimi. Używaj jej do nagłówków, tekstu, paddingu i odstępów, aby projekt skalował się z ekranem bez stosu media queries.

Wpisz najmniejszy rozmiar w pikselach i szerokość ekranu, przy której ma obowiązywać (często 320 lub 375 pikseli dla telefonów).
Wpisz największy rozmiar i szerokość ekranu, przy której ma przestać rosnąć (często od 1200 do 1440 pikseli).
Narzędzie wylicza prostą między tymi dwoma punktami i zapisuje ją jako rem plus vw wewnątrz clamp().
Skopiuj linię CSS do arkusza stylów. Zmień nazwę właściwości, jeśli ustawiasz padding, margin lub gap zamiast tekstu.

Zostaw część w rem w wartości środkowej. Rozmiar złożony tylko z vw ignoruje ustawienie rozmiaru czcionki w przeglądarce odwiedzającego i powiększanie tekstu przestaje działać; połączenie rem i vw zachowuje powiększanie.
Nie pozwól, by tekst główny spadł na telefonach poniżej 16 pikseli. Płynne rozmiary najbardziej przydają się w nagłówkach, gdzie różnica między telefonem a komputerem jest duża.
Używaj tych samych dwóch szerokości ekranu dla każdego clamp() na stronie. Wszystkie rozmiary zaczynają i przestają rosnąć jednocześnie, a proporcje projektu pozostają stabilne.
Jeśli Twoja strona zmienia bazowy rozmiar czcionki z 16 pikseli, ustaw odpowiednio pole rozmiaru bazowego, inaczej każda wartość w rem będzie przesunięta o ten sam współczynnik.

Najczęściej zadawane pytania

Jak działa CSS clamp()?

clamp(MIN, PREFEROWANA, MAX) używa wartości preferowanej, ale nigdy nie schodzi poniżej MIN ani nie przekracza MAX. Przy clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem) tekst ma 16 pikseli na wąskich ekranach, 24 piksele na szerokich i rośnie liniowo pomiędzy nimi.

Jaki wzór stoi za wartością środkową?

Nachylenie to (rozmiar maksymalny minus rozmiar minimalny) podzielone przez (szerokość maksymalna minus szerokość minimalna). Część vw to nachylenie razy 100. Część stała to rozmiar minimalny minus nachylenie razy szerokość minimalna, podzielone przez bazowy rozmiar czcionki, aby zamienić ją na rem. Dla 16 do 24 pikseli między ekranami o szerokości 320 i 1280 pikseli: nachylenie = 8 / 960 = 0.008333, czyli 0.8333vw; część stała = 16 minus 2.6667 = 13.3333 piksela, czyli 0.8333rem.

Czy clamp() działa we wszystkich przeglądarkach?

Tak. Wszystkie aktualne wersje Chrome, Edge, Firefoksa i Safari obsługują clamp(). Ignorują go tylko przeglądarki nieaktualizowane od kilku lat, które wtedy używają rozmiaru ustawionego wcześniej w CSS.

Czy coś może się zmniejszać, gdy ekran robi się szerszy?

Tak. Wpisz większy rozmiar dla małego ekranu niż dla dużego. Nachylenie staje się ujemne, a narzędzie i tak umieszcza mniejszy rozmiar na początku clamp(), jak wymaga tego funkcja.

Czy używać clamp() także do odstępów?

Sprawdza się przy paddingu sekcji i odstępach w siatce, które na telefonach często wyglądają na za duże, a na szerokich ekranach na za ciasne. Użyj tych samych szerokości ekranu co dla tekstu, aby odstępy i tekst skalowały się razem.

Dlaczego płynne rozmiary potrzebują dwóch punktów zaczepienia

Płynny rozmiar to prosta poprowadzona między dwoma punktami: rozmiarem, który chcesz mieć przy małej szerokości ekranu, i rozmiarem przy dużej. clamp() nie pozwala potem, by prosta wyszła poza którykolwiek koniec. Dobry wybór tych punktów jest ważniejszy niż dokładne liczby: weź najwęższą szerokość telefonu, dla której projektujesz, i szerokość, przy której kolumna treści przestaje się poszerzać.
Jeśli górny punkt jest ustawiony znacznie szerzej niż kolumna treści, tekst rośnie dalej na dużych monitorach, choć układ już się nie poszerza, a nagłówki zaczynają wyglądać na przerośnięte obok kolumny o stałej szerokości. Dopasowanie górnego punktu do szerokości kontenera temu zapobiega.

Dostępność i powiększanie

Przeglądarki pozwalają zwiększyć domyślny rozmiar czcionki, a wiele osób słabowidzących na tym polega. Rozmiar zapisany tylko w jednostkach vw całkowicie ignoruje to ustawienie. To część w rem w wartości środkowej sprawia, że płynny rozmiar reaguje na wybór odwiedzającego, i dlatego to narzędzie zawsze zapisuje część stałą w rem.
Sprawdź wynik, powiększając stronę do 200 procent. Tekst zapisany z clamp() powinien nadal rosnąć. Jeśli nagłówek prawie się nie zmienia, udział vw jest za duży w porównaniu z rem; zmniejsz różnicę między rozmiarem minimalnym i maksymalnym i sprawdź ponownie.

Właściwość CSS

Rozmiar minimalny

Rozmiar maksymalny

Szerokość ekranu dla rozmiaru minimalnego

Szerokość ekranu dla rozmiaru maksymalnego

Bazowy rozmiar czcionki

Przyrost na każde 100px ekranu

Część stała

Szerokość ekranu dla rozmiaru maksymalnego musi być większa niż dla rozmiaru minimalnego.

Generator CSS clamp()