Wygeneruj responsywny clamp między dwoma rozmiarami

Programiści front-end używają tego narzędzia, gdy chcą płynnie zmieniać rozmiar tekstu lub odstępów wraz z szerokością ekranu bez tworzenia wielu reguł CSS.

Wygeneruj responsywny clamp między dwoma rozmiarami. Całe przetwarzanie odbywa się w przeglądarce; wpisane dane nie są wysyłane, udostępniane ani zapisywane.

Jak używać

Wprowadź minimalny rozmiar w pikselach, jaki chcesz uzyskać na małych ekranach.
Podaj maksymalny rozmiar w pikselach dla większych ekranów.
Wpisz minimalną szerokość widoku i maksymalną szerokość widoku w pikselach.
Uruchom generator, aby otrzymać deklarację CSS clamp gotową do integracji.

Przykład

Typowy przykład definiuje rozmiar tekstu, który skaluje się między małym a dużym ekranem. Po wygenerowaniu skopiuj wartość clamp i przetestuj ją w swoim arkuszu stylów, aby sprawdzić, czy tekst podąża za szerokością widoku zgodnie z oczekiwaniami.

Dane wejściowe

Wynik

clamp(16px, 13.090909px + 0.909091vw, 24px)

Ograniczenia i formaty

Narzędzie generuje tylko wartość rozmiaru płynnego, a nie cały układ lub inne style.
Funkcja clamp musi być obsługiwana przez przeglądarkę używaną przez Twoich odwiedzających.
Źle dobrane wartości widoku mogą sprawić, że skalowanie będzie zbyt szybkie lub zbyt wolne.
Zawsze testuj wynik przy kilku szerokościach ekranu przed wdrożeniem.

Gdzie odbywa się przetwarzanie

Obliczenie wartości płynnej odbywa się w Twojej przeglądarce. Wprowadzone wymiary pozostają na Twoim urządzeniu i nie są wysyłane do zewnętrznej usługi. Możesz przygotować CSS bez przekazywania danych.

Częste pytania

Co oznaczają cztery wartości?

Podajesz minimalny i maksymalny rozmiar w pikselach, a następnie minimalną i maksymalną szerokość widoku. Narzędzie używa tych punktów do zbudowania progresji między dwoma rozmiarami.

Czy mogę użyć wyniku do marginesów lub odstępów?

Tak, wygenerowana wartość może być używana do rozmiaru tekstu, marginesu lub odstępu, o ile właściwość CSS akceptuje funkcję clamp. Wystarczy dostosować jednostkę i właściwość w arkuszu stylów.

Czy wynik działa w każdej przeglądarce?

Funkcja clamp jest szeroko obsługiwana przez nowoczesne przeglądarki, ale starsze wersje mogą jej nie rozpoznawać. Podaj wartość zapasową, jeśli musisz obsługiwać bardzo stare przeglądarki.

Czy narzędzie generuje cały układ strony?

Nie, narzędzie tworzy wyłącznie wartość płynnego rozmiaru, którą można wykorzystać w deklaracji CSS. Nie generuje pełnego układu strony ani innych stylów. Otrzymany wynik możesz wstawić do właściwości akceptującej funkcję clamp, na przykład dla rozmiaru tekstu, marginesu lub odstępu, ale resztę arkusza stylów przygotowujesz samodzielnie. Przed wdrożeniem sprawdź działanie na kilku szerokościach ekranu.

Co się stanie, jeśli wybiorę złe wartości viewportu?

Źle dobrane wartości viewportu mogą sprawić, że skalowanie będzie zbyt szybkie albo zbyt wolne. Narzędzie używa podanych punktów do zbudowania przejścia między minimalnym a maksymalnym rozmiarem, więc błędne liczby wpłyną na całą progresję. Po wygenerowaniu wyniku przetestuj go na kilku szerokościach ekranu, zanim wdrożysz deklarację. W razie potrzeby zmień wartości wejściowe i wygeneruj nową wersję.