Generator CSS clamp()
Wygeneruj płynny rozmiar CSS clamp() (typografia responsywna) między dwiema szerokościami ekranu.
- Natychmiast
- Za darmo
- Prywatnie (przetwarzane lokalnie)
- Bez rejestracji
Rozmiar, który podąża za ekranem
Podaj rozmiar min i max oraz odpowiadające szerokości ekranu: narzędzie obliczy wartość clamp() do wklejenia w CSS, z podglądem reagującym na szerokość okna.
-
Rozmiar min / max
Np. 16px do 24px.
-
Ekrany odniesienia
Np. 320px do 1280px.
-
Skopiuj clamp()
Do font-size, padding itd.
Przykład: 16 → 24px (320 → 1280px)
| Pozycja | Wartość |
|---|---|
| Rozmiar min / max | 16px / 24px = 1rem / 1.5rem |
| Ekrany | 320px → 1280px |
| Płynne nachylenie | 0.833vw |
| Wynik | clamp(1rem, 0.833rem + 0.833vw, 1.5rem) |
Przy 320px rozmiar to 16px, przy 1280px 24px, a pomiędzy zmienia się liniowo. Obliczenie 100% lokalne.
Najczęstsze pytania
Do czego służy clamp()?
Funkcja CSS clamp(min, preferowana, max) ogranicza wartość między minimum a maksimum, z wartością preferowaną dostosowującą się do szerokości ekranu. To nowoczesny sposób na płynne rozmiary czcionki bez media queries.
Jak liczona jest wartość preferowana?
Rysuje się prostą między (min szerokość, min rozmiar) a (max szerokość, max rozmiar). Część środkowa łączy stałą bazę w rem i nachylenie w vw, np. 0.833rem + 0.833vw, ograniczone przez min/max w rem.
Po co mieszać rem i vw?
vw powiększa rozmiar wraz z szerokością okna (płynność); rem dodaje stałą bazę, by nachylenie nie zaczynało się od zera. Połączenie daje liniowy, czytelny wzrost, szanujący powiększenie użytkownika.
Czy trzeba zachować min i max?
Tak. Bez granic tekst byłby maleńki na małych ekranach i ogromny na bardzo dużych. clamp() blokuje wartość poza twoim zakresem szerokości odniesienia.