Generator CSS clamp
Wprowadź szerokości i rozmiary dla małych i dużych ekranów, aby wygenerować CSS płynnie zmieniający rozmiar tekstu lub odstępy. Wyświetl podgląd wyniku w px lub rem, a następnie skopiuj CSS i kod Tailwind albo zapisz je jako tekst.
Co możesz zrobić
Określ dwie pary szerokości i rozmiarów
Określ rozmiary dla wąskiego i szerokiego widoku. Obsługiwanych jest 6 typów: rozmiar czcionki, odstępy, padding, margines, szerokość i wysokość.
Generuj kod w px lub rem
Wprowadź wszystkie wartości w px, a jako jednostkę wyniku wybierz px lub rem. Uzyskaj deklarację CSS i kod Tailwind z dowolną właściwością.
Natychmiast sprawdź wygenerowany CSS
Zastosuj CSS do dwóch elementów podglądu. Sprawdź wygląd tekstu i odstępów przy bieżącej szerokości ramki.
Jak korzystać
Wybierz właściwość do zmiany
Wybierz właściwość CSS, którą chcesz określić, na przykład font-size dla rozmiaru tekstu lub gap dla odstępu między elementami.
Wprowadź dwie szerokości widoku i rozmiary
Wprowadź dwie szerokości widoku i odpowiadający im rozmiar w px. Rozmiar dla węższego widoku nie może być większy niż dla szerszego.
Sprawdź jednostkę wyniku i wygeneruj kod
Wybierz px lub rem w ustawieniach zaawansowanych. Dla rem sprawdź również bazowy rozmiar czcionki przed wybraniem „Generuj CSS”.
Sprawdź podgląd i pobierz kod
Skopiuj CSS i wklej go w miejscu użycia. Otwórz kod Tailwind, aby go pobrać. Możesz też skopiować oba elementy naraz lub zapisać je jako tekst.
Przydatne, gdy chcesz
Płynnie zmieniać rozmiary nagłówków
Ustawić rozmiar tekstu dla wąskich i szerokich widoków oraz płynnie zmieniać go między tymi szerokościami zamiast skokowo.
Dopasować odstępy do szerokości widoku
Dostosować odstępy między kartami lub wewnętrzny padding tak, aby zmieniały się w wyznaczonym zakresie minimalnym i maksymalnym.
Określanie płynnych rozmiarów i odczytywanie podglądu
3 wartości w clamp
clamp to funkcja CSS określająca wartość minimalną, płynną i maksymalną. Wygenerowany wzór łączy dwa punkty odniesienia wyrażeniem liniowym i ogranicza rozmiary poza zakresem do wartości końcowych.
Dane wejściowe w px; wynik w px lub rem
Szerokości widoku i rozmiary wprowadza się w px. Dla wyniku rem rozmiary i stała są dzielone przez bazowy rozmiar czcionki, a współczynnik vw dla szerokości widoku pozostaje bez zmian.
Dopasuj bazowy rem do miejsca użycia kodu
Domyślnie kod przyjmuje, że 1rem to 16px. Jeśli rozmiar czcionki elementu głównego w miejscu użycia kodu jest inny, zmienią się również rozmiary końcowe i sposób ich zmiany. Sprawdź to także w miejscu użycia.
Ramka podglądu określa szerokość widoku
Podgląd jest niezależną ramką wyświetlania. Wartość vw oblicza się na podstawie szerokości wewnątrz ramki, a nie całego ekranu. W zależności od właściwości ten sam wygenerowany CSS jest stosowany do tekstu, odstępu między dwoma elementami, marginesów lub wymiarów elementów.
Sprawdź również miejsce użycia kodu
Tekst i struktura podglądu są stałe. W miejscu użycia kodu sprawdź też czcionki, długi tekst, zawijanie wierszy i powiększenie tekstu w przeglądarce. Kod Tailwind używa formatu dowolnej właściwości; sprawdź również, czy jest wykrywany i generowany w miejscu użycia.
Często zadawane pytania
Co dzieje się poza określonym zakresem szerokości widoku?
Szerokości mniejsze niż podana mniejsza szerokość używają rozmiaru minimalnego, a szerokości większe niż podana większa szerokość — rozmiaru maksymalnego. W przypadku rem należy użyć takiego samego bazowego rozmiaru czcionki, jak podczas generowania kodu.
Jaki jest bazowy rozmiar czcionki dla rem?
Określa, ile pikseli odpowiada 1rem. Domyślnie jest to 16px; w ustawieniach zaawansowanych możesz zmienić wartość na 1–1000px. Dopasuj ją do rozmiaru czcionki elementu głównego w miejscu użycia kodu.
Czy mogę ustawić jednakowe rozmiary lub wartości ujemne?
Aby uzyskać stały rozmiar, ustaw taką samą wartość minimalną i maksymalną. Wartości ujemne są dozwolone tylko dla marginesu. Nie są obsługiwane rozmiary malejące wraz ze wzrostem szerokości widoku.
Czy zmiany właściwości lub wartości są stosowane od razu?
Zmiana tych wartości usuwa wygenerowany kod i podgląd. Wybierz „Generuj CSS”, aby je zaktualizować. To samo dotyczy zmiany jednostki wyniku lub bazowego rozmiaru czcionki.
Czy mogę zmienić tekst podglądu?
Tekst przykładowy oraz Aa 123 są stałe. Nie można edytować tekstu. Sprawdź też rzeczywisty tekst i szerokość wyświetlania na stronie, która używa wygenerowanego CSS.
Dane wejściowe i wyniki
- Szerokość widoku
- 1–100000px. Mniejsza szerokość widoku musi być mniejsza od większej. Dozwolone są również wartości dziesiętne.
- Rozmiar
- 0–10000px. Tylko margines może mieć wartość do −10000px. Rozmiar dla węższego widoku nie może być większy niż dla szerszego.
- Wynik
- Deklaracja CSS i właściwość Tailwind. Zapisz oba elementy jako css-clamp-generator.txt.
- Precyzja
- Wygenerowany wzór używa współczynników z maksymalnie 13 cyframi znaczącymi. Błąd występuje, gdy szerokości są tak zbliżone, że zaokrąglony wzór nie może odtworzyć punktów odniesienia.