Generator CSS clamp()
Wygeneruj płynną wartość CSS clamp(), która płynnie dostosowuje się między dwiema szerokościami viewportu.
Generator CSS clamp()
Płynna typografia i rozstaw dostosowują się hładko, gdy zmienia się viewport, zamiast skakać między ustalonymi rozmiarami na kilku breakpointach. Narzędzie to wygeneruje za ciebie wartość: podaj minimalny i maksymalny rozmiar oraz szerokości viewportu, w których się stosują, a otrzymasz funkcję CSS clamp() z liniową interpolacją między nimi, gotową do wklejenia do arkusza stylów.
Minimalny i maksymalny rozmiar określają oba końce skali; minimalna i maksymalna szerokość viewportu określają, gdzie każdy koniec się włącza — poniżej minimalnej szerokości wartość pozostaje u dolnej granicy, powyżej maksymalnej u górnej granicy, a pomiędzy tym rośnie liniowo z viewportem. Jednostka przełącza wyjście między px a rem, rozmiar czcionki głównej kontroluje konwersję px na rem, a liczba miejsc po przecinku kontroluje dokładność generowanych liczb. Format wyjścia opakowuje ten sam clamp() jako zwykłą deklarację, zmienną CSS lub klasę Tailwind, dzięki czemu możesz ją wkleić bezpośrednio do kodu, nad którym pracujesz.
Włączenie kontroli dostępności dodaje notkę, gdy ustawienie mogłoby spowodować problemy: rozmiar oparty na px ignoruje preferencję rozmiaru czcionki przeglądarki czytelnika, a minimum, które jest zbyt małe, pozostaje trudne do przeczytania nawet zanim zacznie się skalować. Oba są częstymi błędami w ręcznie napisanych formułach płynnego tekstu, a narzędzie je oznacza zamiast wysyłać je bez słowa.
Wszystko jest obliczane w twojej przeglądarce, gdy dostosowujesz opcje — nic, co wpiszesz, nigdzie się nie wysyła. Gdy wynik ci się spodoba, skopiuj go, pobierz jako plik .txt lub wyślij do wejścia innego narzędzia, aby kontynuować pracę.