Generator CSS clamp()

Czym jest Generator CSS clamp()?

Generator CSS clamp() to darmowy kalkulator płynnej typografii dla programistów front-end i projektantów. Podajesz mu minimalny rozmiar czcionki, maksymalny rozmiar czcionki, minimalną szerokość viewportu i maksymalną szerokość viewportu; zwraca deklarację clamp(min, preferowana, maks), w której wartość preferowana łączy przesunięcie w rem z nachyleniem w vw, dzięki czemu tekst rośnie liniowo wraz z ekranem i nigdy nie wykracza poza Twoje granice. Eliminuje to potrzebę nakładania na siebie zapytań medialnych font-size i utrzymuje nagłówki oraz tekst główny responsywne na każdym urządzeniu. Wybierz rozmiar podglądu, aby zobaczyć, jak wartość się renderuje, przełącz jednostkę wyjściową między rem a px i skopiuj wiersz prosto do swojego arkusza stylów.

Jak używać Generator CSS clamp()

1. Wprowadź minimalny rozmiar czcionki — rozmiar, jaki tekst powinien mieć na najmniejszym ekranie.
2. Wprowadź maksymalny rozmiar czcionki — rozmiar, jaki tekst powinien osiągnąć na największym ekranie.
3. Ustaw minimalną i maksymalną szerokość viewportu, między którymi rozmiar ma się skalować.
4. Otwórz ustawienia, aby zmienić jednostkę wyjściową (rem zachowuje dostępność; px również jest dostępny), jeśli wolisz.
5. Wybierz rozmiar podglądu, aby wyrenderować przykładowy tekst przy tym viewportcie, a następnie odczytaj wartość clamp() na żywo.
6. Skopiuj wygenerowane wyrażenie clamp() i wklej je do swojego font-size w CSS.

Przykłady

font min 16, font maks 20, vw min 320, vw maks 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

font min 32, font maks 64, vw min 320, vw maks 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

font min 12, font maks 14, vw min 480, vw maks 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

Najczęściej zadawane pytania

Jak wartość clamp() skaluje się bez zapytań medialnych?

clamp(min, preferowana, maks) przyjmuje dolną granicę, wartość preferowaną (płynną) i górną granicę. Wartość preferowana to prosta w postaci rem + vw, obliczona tak, aby czcionka była równa Twojemu minimum przy minimalnym viewportcie i Twojemu maksimum przy maksymalnym viewportcie. Pomiędzy tymi szerokościami przeglądarka interpoluje automatycznie, a poza nimi clamp() przypina rozmiar do najbliższej granicy — wszystko w jednej deklaracji.

Dlaczego wynik jest w rem zamiast w px?

Użycie rem dla części stałych respektuje ustawienie rozmiaru czcionki w przeglądarce użytkownika, co jest lepsze dla dostępności. Nachylenie zależne od viewportu jest wyrażone w vw. Możesz zmienić jednostkę na px w ustawieniach, jeśli Twój projekt wymaga jednostek bezwzględnych, ale rem to zalecana wartość domyślna.

Jakiego zakresu viewportu powinienem użyć?

Częstym wyborem jest najmniejsza obsługiwana szerokość (często 320px lub 360px) jako minimum i najszerszy kontener treści (np. 1240px–1536px) jako maksimum. Czcionka jest w pełni płynna tylko w tym zakresie; poniżej niego tekst pozostaje na minimum, a powyżej na maksimum.

Czy działa to dla dowolnej długości CSS, a nie tylko font-size?

Tak. Wygenerowana wartość clamp() to po prostu długość, więc możesz ją wkleić do padding, margin, gap lub dowolnej właściwości akceptującej długość. Etykiety wspominają o font-size, ponieważ płynna typografia to najczęstsze zastosowanie, ale matematyka jest identyczna dla odstępów.

Czy moje dane są gdzieś wysyłane?

Nie. Obliczenia działają w całości w Twojej przeglądarce za pomocą JavaScriptu — Twoje rozmiary czcionek i szerokości viewportu nigdy nie są wysyłane na żaden serwer, więc narzędzie działa prywatnie, a po załadowaniu strony nawet offline.