Kalkulator CSS clamp
W tym kalkulatorze CSS clamp zamieniasz wartość minimalną, maksymalną i zakres viewportu na gotowe wyrażenie clamp() dla czcionek, odstępów i szerokości – bez media queries.
Przykład: Właściwość CSS: font-size · Najmniejsza wartość (telefon) 16 px · Największa wartość (komputer) 24 px · Od szerokości viewportu 320 px · Do szerokości viewportu 1280 px · Bazowy rozmiar czcionki (rem) 16 px → CSS: font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);. Źródło: MDN – CSS clamp(): clamp(MIN, VAL, MAX). Stan na: .
Jak to obliczamy
clamp(MIN, WARTOŚĆ, MAX) ogranicza wartość od dołu i od góry. Dla czcionki rosnącej od 16 do 24 px między 320 px a 1280 px szerokości wygląda to tak: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
Jak to liczymy
Między dwiema szerokościami viewportu wartość rośnie liniowo. Nachylenie to (max − min) / (viewportmax − viewportmin), wyraz wolny to min − nachylenie · viewportmin. Wyraz wolny jest w rem, nachylenie w vw, więc powiększona przez użytkownika czcionka przeglądarki nadal się liczy. Tabela pokazuje wartość na typowych urządzeniach.
Warto wiedzieć
- Rozmiary czcionek wyłącznie w vw, bez części w rem, prawie nie reagują na powiększanie; dlatego wyrażenie ma część rem.
- clamp() działa też dla padding, margin, gap i width – wszędzie tam, gdzie może stać długość.
- Wszystkie obecne przeglądarki obsługują clamp() (od 2020 r.).
Najczęściej zadawane pytania
Jak obliczyć clamp() dla rozmiarów czcionek?
Wpisz minimalny i maksymalny rozmiar w px oraz szerokości viewportu. Kalkulator zbuduje wartość preferowaną z rem i vw i zamknie ją między minimum a maksimum.
Dlaczego wyrażenie zawiera część w rem?
Wartość tylko w vw ignoruje rozmiar czcionki w przeglądarce. Z częścią rem tekst nadal skaluje się u osób z większą czcionką domyślną.
Czy clamp() nadaje się też do odstępów?
Tak, dla każdej właściwości CSS przyjmującej długość, np. padding, margin, gap lub width.
Co oznacza 1.5rem na końcu?
Maksimum: powyżej górnej szerokości viewportu tekst przestaje rosnąć. Przy bazie 16 px 1,5 rem to dokładnie 24 px.
Źródła i podstawa prawna
- MDN – CSS clamp(): clamp(MIN, VAL, MAX)
- W3C – CSS Values and Units Module Level 4: Mathematical Expressions (min(), max(), clamp())
- W3C WCAG 2.2 – Success Criterion 1.4.4 Resize Text (tekst musi dać się powiększyć do 200 %)
Stan na: · Zasady redakcyjne
Podobne narzędzia
- Px na rem – przelicznikPx na rem z własnym rozmiarem bazowym, a do tego em, pt, procent i vw oraz tabela popularnych rozmiarów czcionek do sprawdzenia. Bezpłatnie, bez rejestracji.
- Generator gradientu CSSGenerator gradientu CSS: liniowy, radialny lub stożkowy, dowolna liczba punktów koloru, kąt i kolor zapasowy – podgląd na żywo i gotowy kod CSS do skopiowania.
- Generator box-shadow CSSBox shadow generator: twórz cienie CSS suwakami – wiele warstw, rozmycie, spread, kolor z przezroczystością, inset i szablony, CSS kopiujesz jednym kliknięciem.
- Generator border-radius CSSZaokrąglone rogi CSS suwakami: wszystkie rogi razem lub osobno, px albo %, eliptyczna składnia z 8 wartościami – najkrótszy zapis, podgląd na żywo i kopiowanie.
- Pary czcionek: jakie czcionki do siebie pasująPary czcionek do nagłówków i tekstu z podglądem na żywo, gotowym CSS i dostępnością w Windows, macOS, iOS i Androidzie – tylko czcionki systemowe.
- Sprawdzanie kontrastu kolorów (WCAG 2.2)Sprawdź kontrast kolorów tekstu i tła: współczynnik kontrastu WCAG 2.2 z oceną AA/AAA dla zwykłego tekstu, dużego tekstu i elementów interfejsu.
- Moje IP – jaki mam adres IP?Moje IP od razu: pokazuje Twój publiczny adres IP, rozpoznaje IPv4 lub IPv6 i wyjaśnia różnicę. Za darmo, bez rejestracji – adres IP nie jest zapisywany.
- Generator PESEL do testów i sprawdzanie numeruGenerator PESEL z daty urodzenia i płci do testów oraz sprawdzanie poprawności PESEL: cyfra kontrolna, data urodzenia, płeć. Za darmo, bez rejestracji.
- Kolorowanie składniKolorowanie składni online: wklej kod, wybierz kolory dla JavaScript, JSON, HTML, CSS, SQL, Python lub Bash i skopiuj gotowy HTML na bloga, do maila albo Worda.