Generator CSS clamp() za darmo
Generuj płynną wartość CSS clamp() dla responsywnej typografii i odstępów. Ustaw minimalny/maksymalny rozmiar i zakres widoku, zobacz podgląd na żywo i skopiuj jednowierszowy CSS.
Wyrenderowany rozmiar przy różnych viewportach
clamp(min, preferred, max) płynnie skaluje wartość wraz z viewportem, a następnie blokuje ją na min i max. Zastępuje stosy zapytań media dla typografii, odstępów i szerokości jedną linią.
Typowe zastosowania
- Utwórz Typografię Responsywną FluidPłynnie skaluj rozmiary czcionek między mobilem a desktopem jedną linią.
- Marginesy i Rozmieszczenie FluidSpraw, aby rozmieszczenie sekcji rosło wraz z widokiem zamiast przeskakiwać przy punktach przerwania.
- Zastąp Zapytania Mediów clamp()Zwiń stosy przesłonięć punktów przerwania w jedną wartość fluid.
- Zbuduj Skalę Typu FluidGeneruj spójne kroki clamp() dla skali typograficznej systemu projektowania.
- Tytuły Bohatera i Wyświetlacza FluidSkaluj duże nagłówki strony docelowej dramatycznie, ale bezpiecznie.
Jak to działa
To narzędzie oblicza wartości CSS clamp() za pomocą ręcznie napisanego wzoru interpolacji liniowej — bez bibliotek i odwołań do serwera. Wpisujesz dwa rozmiary i dwie szerokości okna; obliczenia działają natychmiast w przeglądarce i dają gotowe do wklejenia wyrażenie clamp() z preferowaną wartością opartą na vw, która płynnie skaluje tekst lub odstępy między tymi punktami granicznymi.
- 1Obliczanie nachylenia liniowegoNarzędzie oblicza nachylenie piksel na piksel: (maxSize - minSize) / (maxViewport - minViewport). To nachylenie jest następnie przeliczane na jednostki vw przez pomnożenie przez 100 — to sedno skalowania względem okna w CSS.
- 2Wyznaczanie wyrazu wolnegoPrzesunięcie (w px lub rem) jest obliczane tak, aby funkcja liniowa trafiała dokładnie w minimalny rozmiar przy minimalnej szerokości okna. Razem nachylenie i przesunięcie tworzą preferowaną wartość wewnątrz clamp() — tę część, która faktycznie się skaluje.
- 3Przeliczanie jednostek i formatowanie wynikuJeśli wybierzesz wynik w rem, każda wartość w pikselach jest dzielona przez ustawiony rozmiar czcionki głównej (domyślnie 16px) przed wpisaniem do ciągu clamp(). Tworzona jest też odpowiadająca klasa Tailwind z dowolną wartością, w której spacje są zastąpione podkreśleniami zgodnie ze składnią Tailwind.
- 4Podgląd z suwakiem szerokości oknaSuwak pozwala przesuwać szerokość od 320px do 1920px. W każdej pozycji ten sam wzór nachylenia i przesunięcia oblicza na żywo ograniczony rozmiar i renderuje przykładowy tekst w tym rozmiarze, więc widzisz zachowanie skalowania, zanim cokolwiek skopiujesz.
Powiązane narzędzia
Generator siatki CSS
Wizualnie zaprojektuj siatkę CSS — ścieżki, jednostki i przerwy — i skopiuj wygenerowany CSS i HTML.
Jaka jest moja rozdzielczość ekranu
Zobacz rozdzielczość ekranu w pikselach CSS i rzeczywistych, rozmiar okna, współczynnik pikseli, głębię kolorów, HDR, obsługę dotyku i częstotliwość odświeżania, a następnie skopiuj wszystko.
Kreator podpisu
Narysuj podpis myszą, palcem lub rysikiem albo wpisz swoje imię czcionką odręczną, a następnie wyeksportuj go jako przezroczysty PNG lub SVG.