Kalkulator CSS Clamp()
CSS Clamp() Calculator
Podaj minimalny i maksymalny rozmiar oraz zakres szerokości ekranu — dostaniesz gotową wartość clamp() do płynnej typografii, z podglądem na żywo przy przesuwaniu szerokości testowej.
Give a minimum and maximum size plus a screen-width range — get a ready clamp() value for fluid typography, with a live preview as you drag the test width.
Wpisz PX lub VW — drugie pole przeliczy się automatycznie względem podanej szerokości viewportu.
Enter PX or VW — the other field recalculates automatically relative to the given viewport width.
Proporcja uproszczona przez największy wspólny dzielnik.
Ratio simplified using the greatest common divisor.
To zakres orientacyjny, nie sztywna reguła — dostosuj do konkretnego kroju pisma.
This is a rough range, not a strict rule — adjust for the specific typeface.
Wpisz wartość
Enter a value
Ustaw minimalny i maksymalny rozmiar tekstu oraz odpowiadające im szerokości ekranu.
Set the minimum and maximum text size and their corresponding screen widths.
Odczytaj wynik
Read the result
Przesuń suwak testowej szerokości ekranu, żeby zobaczyć wynik na żywo, i skopiuj gotowy kod.
Drag the test screen-width slider to see the result live, and copy the ready code.
Sprawdź pozostałe zakładki
Check the other tabs
Ten sam widget mieści 7 kalkulatorów — przełącz zakładkę, żeby użyć innego bez opuszczania strony.
The same widget holds 7 calculators — switch tabs to use another one without leaving the page.
Jak działa funkcja clamp() w CSS?
How does the CSS clamp() function work?
clamp(min, preferred, max) przyjmuje trzy wartości: dolną granicę, wartość preferowaną (zwykle wyrażenie z vw) i górną granicę. Przeglądarka wybiera wartość preferowaną, dopóki mieści się między min i max — poza tym zakresem trzyma się granicy.
clamp(min, preferred, max) takes three values: a lower bound, a preferred value (usually a vw-based expression), and an upper bound. The browser uses the preferred value as long as it falls between min and max — outside that range, it sticks to the boundary.
Skąd bierze się dziwna wartość ze slope i vw?
Where does the odd slope-and-vw value come from?
To środkowy człon clamp() — połączenie stałej wartości w rem z wyrażeniem w vw, obliczone tak, żeby wynik przechodził dokładnie przez punkt minimalny przy najmniejszej szerokości i punkt maksymalny przy największej. To standardowa technika fluid typography (m.in. z narzędzia Utopia).
That's clamp()'s middle term — a fixed rem value combined with a vw expression, computed so the result passes exactly through the minimum point at the smallest width and the maximum point at the largest. This is the standard fluid-typography technique (as used by tools like Utopia).
Czy clamp() działa we wszystkich przeglądarkach?
Does clamp() work in every browser?
Tak, clamp() ma pełne wsparcie we wszystkich aktualnych przeglądarkach od kilku lat — to jedna z bezpieczniejszych nowoczesnych funkcji CSS do użycia w produkcji.
Yes, clamp() has had full support in all current browsers for several years — it's one of the safer modern CSS features to use in production.
Dlaczego clamp() zastąpił media queries dla typografii
Zamiast pisać osobne reguły font-size dla kilku progów szerokości ekranu, clamp() daje jedną linię CSS, która skaluje się płynnie między dwoma skrajnymi punktami — mniej kodu, płynniejszy efekt.
Jak czytać wygenerowany kod
Pierwsza wartość to bezwzględne minimum (nigdy nie będzie mniejszy), ostatnia to bezwzględne maksimum, środkowa to wzór łączący stały rem z komponentem vw, który realnie steruje płynnym skalowaniem między progami.
Na co uważać w praktyce
Zbyt duża różnica między min a max na wąskim zakresie szerokości viewportu (np. 16px→48px między 320px a 400px) daje bardzo agresywne, nienaturalne skalowanie — testuj wynik na suwaku testowym powyżej, zanim wdrożysz.
Why clamp() replaced media queries for typography
Instead of writing separate font-size rules for several screen-width breakpoints, clamp() gives one line of CSS that scales smoothly between two extreme points — less code, a smoother effect.
How to read the generated code
The first value is the absolute minimum (it will never go smaller), the last is the absolute maximum, and the middle one is the formula combining a fixed rem with a vw component that actually drives the smooth scaling between the thresholds.
What to watch for in practice
Too large a gap between min and max over a narrow viewport-width range (e.g. 16px→48px between 320px and 400px) produces very aggressive, unnatural scaling — test the result with the slider above before shipping it.
Zobacz wszystkie kalkulatory naraz.
See all calculators at once.
Jedna strona zbierająca 7 narzędzi web designera w jednym miejscu.
One page collecting 7 web designer tools in one place.