Kalkulator CSS Clamp().

Zacisk CSS(MIN, PREFERRED, MAX) pozwala jednej deklaracji zastąpić cały stos zapytań o media: wartość pozostaje na poziomie MIN poniżej najmniejszej rzutni, MAX powyżej największej i płynnie skaluje się pomiędzy nimi. Najtrudniejszą częścią jest termin PREFEROWANY — wyrażenie odnoszące się do rzutni, takie jak 0,833 rem + 0,833 vw — którego nikt nie chce wyprowadzać ręcznie. Ten kalkulator oblicza go w rzeczywistości na podstawie czterech liczb: rozmiaru minimalnego, rozmiaru maksymalnego i szerokości rzutni, przy której każda z nich ma zastosowanie.

Wyświetlana jest każda liczba pośrednia, a nie tylko ostatnia linia: nachylenie (o ile jednostek rozmiaru rośnie wartość na piksel rzutni), to samo nachylenie wyrażone jako współczynnik vw i przecięcie osi y — stała dodawana do składnika vw, tak aby linia przechodziła dokładnie przez dwa określone punkty. Każdy, kto wkleił wartość Clamp() z tutoriala bez zrozumienia jej, może zobaczyć i sprawdzić rzeczywistą arytmetykę tutaj.

Suwak szerokości rzutni steruje oknem podglądu na żywo, więc płynne skalowanie jest widoczne, a nie tylko obliczone: przeciągnij go pomiędzy minimalnym i maksymalnym punktem przerwania i obserwuj, jak zmienia się rozmiar przykładowego tekstu dokładnie tak, jak podczas zmiany rozmiaru prawdziwego okna przeglądarki. Linia wyjściowa i aktualizacja podziału przy każdym naciśnięciu klawisza — to naturalnie łączy się z konwerterem px na rem, gdy sam podstawowy rozmiar czcionki również wymaga konwersji.

Przejdź do trybu skali pisma, aby uzyskać kompletny system typografii płynnej w jednym kroku: wprowadź rozmiar podstawowy i współczynnik modułowości (1,125 do 1,5) i uzyskaj sześć rozmiarów — mały, podstawowy, h4, h3, h2 i h1 — każdy obliczony jako osobna linia zaciskowa() pomiędzy łagodniejszym postępem mobilnym a współczynnikiem pełnego pulpitu, gotowych do skopiowania jako blok niestandardowych właściwości CSS.