Kalkulator CSS Clamp()

CSS clamp(MIN, PREFERRED, MAX) pozwala jednej deklaracji zastąpić cały stos media queries: wartość pozostaje na poziomie MIN poniżej najmniejszego viewportu, na poziomie MAX powyżej największego i płynnie skaluje się pomiędzy nimi. Trudną częścią jest człon PREFERRED — wyrażenie zależne od viewportu, takie jak 0.833rem + 0.833vw — którego nikt nie chce wyprowadzać ręcznie. Ten kalkulator oblicza go naprawdę na podstawie czterech liczb: rozmiaru minimalnego, rozmiaru maksymalnego oraz szerokości viewportu, przy której każdy z nich obowiązuje.

Pokazana jest każda wartość pośrednia, nie tylko końcowa linia: nachylenie (o ile jednostek rozmiaru rośnie wartość na piksel viewportu), to samo nachylenie wyrażone jako współczynnik vw oraz punkt przecięcia z osią Y — stała dodawana do członu vw, aby linia przechodziła dokładnie przez dwa określone przez Ciebie punkty. Każdy, kto wkleił wartość clamp() z poradnika, nie rozumiejąc jej, może tutaj zobaczyć i sprawdzić rzeczywiste działania arytmetyczne.

Suwak szerokości viewportu steruje polem podglądu na żywo, dzięki czemu płynne skalowanie jest widoczne, a nie tylko obliczone: przeciągnij go między minimalnym a maksymalnym punktem granicznym i obserwuj, jak przykładowy tekst zmienia rozmiar dokładnie tak, jak robiłby to podczas rzeczywistej zmiany rozmiaru okna przeglądarki. Linia wynikowa i opis aktualizują się przy każdym naciśnięciu klawisza — to naturalnie łączy się z konwerterem px na rem, gdy sam bazowy rozmiar czcionki również wymaga konwersji.

Przełącz się na tryb skali typograficznej, aby uzyskać kompletny płynny system typografii w jednym kroku: wprowadź rozmiar bazowy i proporcję modularną (od 1,125 do 1,5), a otrzymasz sześć rozmiarów — small, base, h4, h3, h2 i h1 — każdy obliczony jako własna linia clamp() między łagodniejszą progresją mobilną a pełną proporcją desktopową, gotowe do skopiowania jako blok zmiennych niestandardowych CSS.