Skalowanie fontów i odstępów za pomocą funkcji clamp(), min(), max()

Do tej pory skalowanie wyglądu strony (np. rozmiaru tekstu, paddingów) opierało się głównie na media queries. Ale CSS oferuje teraz nowe, bardzo potężne narzędzia: clamp(), min() i max(). Pozwalają one precyzyjnie określić wartości, które mogą się dynamicznie zmieniać w zależności od rozmiaru okna – bez pisania dodatkowych reguł.

Funkcja `clamp()` – elastyczna wartość z limitem

Najczęściej używaną funkcją w responsywnym skalowaniu jest clamp(). Jej składnia wygląda tak:

font-size: clamp(1rem, 2.5vw, 2rem);

To oznacza:
– minimalna wartość: 1rem,
– wartość preferowana (dynamiczna): 2.5vw,
– maksymalna wartość: 2rem.

Efekt: Rozmiar tekstu będzie rósł wraz ze zwiększaniem okna, ale nigdy nie przekroczy 2rem i nie spadnie poniżej 1rem.

Funkcje `min()` i `max()` – porównywanie wartości

Te funkcje pozwalają ustawić wartość jako mniejszą lub większą z podanych – przydaje się to np. w paddingach:

padding: max(1rem, 2vw); /* weź większą z tych wartości */
padding: min(32px, 5vw); /* weź mniejszą z tych wartości */

Przykład użycia: Jeśli ekran jest wąski – padding może być „ciasny”, ale na szerokim ekranie automatycznie się zwiększy.

Dlaczego to jest lepsze niż media queries?

Masz płynne przejścia między rozmiarami – bez skoków przy breakpointach,
Nie musisz pisać kilku wersji tego samego stylu,
Kod jest krótszy, bardziej czytelny i elastyczny,
Współpracuje z wszystkimi jednostkami: rem, vw, %, itd.

Przykład – responsywny nagłówek bez media queries

h1 {
  font-size: clamp(24px, 5vw, 48px);
  padding: clamp(12px, 2vw, 32px);
}

Efekt działania: nagłówek automatycznie dopasowuje swój rozmiar i odstępy do szerokości okna – wygląda dobrze na każdym urządzeniu, bez żadnych media queries!

Ćwiczenie – przetestuj skalowanie za pomocą `clamp()`

Otwórz poniższy przykład w JSFiddle i zobacz, jak skalują się fonty i marginesy wraz ze zmianą szerokości przeglądarki:

👉 Otwórz i sprawdź w JSFiddle

<style>
body {
  font-family: sans-serif;
  padding: 20px;
}

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  padding-bottom: clamp(10px, 2vw, 30px);
  color: #1976d2;
}

p {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  line-height: 1.5;
}
</style>

<h1>Responsywny nagłówek</h1>
<p>
  Ten tekst automatycznie zmienia swój rozmiar i odstęp – bez media queries.
  Zmień rozmiar okna, by to zobaczyć!
</p>

Podsumowanie

clamp() pozwala określić wartość minimalną, preferowaną i maksymalną – idealne do responsywnych fontów i marginesów,
min() i max() wybierają mniejszą lub większą wartość z kilku opcji,
Dzięki tym funkcjom możesz często zrezygnować z pisania media queries,
To nowoczesny sposób na tworzenie płynnie reagujących layoutów.

W kolejnej części modułu sprawdzimy, czego się nauczyłeś – przygotujemy quiz i praktyczne zadanie z całego punktu „Responsive Design”.

Previous Temat

Back to Zagadnienie

Next Quiz

Skalowanie fontów i odstępów za pomocą funkcji clamp(), min(), max()