Nagłówek na telefonie jest za duży, na monitorze za mały, a w tablecie łamie się w najgorszym miejscu. Znasz to? Zamiast pisać kolejne breakpointy, możesz opisać cały zakres jedną funkcją.
01 / 05Problem z media queries
Klasyczne podejście to skoki: 2rem do 600px, 3rem do 900px, 4rem powyżej. Działa, ale rozmiar zmienia się skokowo, a każdy nowy komponent to kolejne bloki w CSS.
Podejście skokoweh1 { font-size: 2rem; }
@media (min-width: 600px) { h1 { font-size: 3rem; } }
@media (min-width: 900px) { h1 { font-size: 4rem; } }Trzy reguły, trzy miejsca do pilnowania i zero płynności między nimi.
02 / 05Jak działa clamp()
clamp(min, preferowana, max) przyjmuje trzy wartości. Przeglądarka bierze wartość preferowaną, ale nigdy nie zejdzie poniżej minimum ani nie przekroczy maksimum.
| Argument | Rola | Przykład |
|---|---|---|
| min | najmniejszy dozwolony rozmiar | 1.6rem |
| preferowana | wartość płynna, zależna od ekranu | 4vw + .5rem |
| max | górny limit, żeby nie urosło za bardzo | 3.4rem |
Jedna linijka zamiast trzech regułh1 { font-size: clamp(1.6rem, 4vw + .5rem, 3.4rem); }03 / 05Wzór, który działa
Najczęstszy błąd to dobieranie vw na oko. Lepiej policzyć: chcesz, żeby rozmiar rósł liniowo od 24px przy 320px do 56px przy 1000px szerokości ekranu.
- nachylenie = (56 − 24) / (1000 − 320) = 0,0471, czyli 4,71vw
- przesunięcie = 24 − 0,0471 × 320 = 8,9px, czyli 0,56rem
Wynik obliczeńh1 { font-size: clamp(1.5rem, 4.71vw + .56rem, 3.5rem); }
Dodawaj rem do vw. Dzięki temu tekst
nadal reaguje na zmianę rozmiaru czcionki w ustawieniach
przeglądarki.
04 / 05Cała skala typografii
Najwygodniej zapisać skalę raz, w zmiennych, i używać jej w całym projekcie. Tak działa ta strona.
:root:root {
--step-0: clamp(1rem, .96rem + .2vw, 1.125rem);
--step-1: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
--step-2: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
--step-3: clamp(2.1rem, 1.2rem + 4.5vw, 4.6rem);
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }Zmiana skali w jednym miejscu przestawia całą stronę, a Ty nie dotykasz żadnego media query.
05 / 05Pułapki i dostępność
Sam vw w font-size blokuje
powiększanie tekstu. To najczęstszy błąd przy płynnej
typografii.
- Nie używaj samego
vw. Użytkownik nie przybliży wtedy tekstu zoomem (WCAG 1.4.4). - Pilnuj max. Bez górnego limitu nagłówek na ultrawide urośnie do absurdu.
- Sprawdź zawijanie. Dodaj
text-wrap: balance, żeby nagłówek nie kończył się jednym wyrazem w linii. - Testuj na 320px. Najmniejszy ekran najszybciej pokaże błąd.
To wszystko. Jedna funkcja, mniej kodu i nagłówki, które wyglądają dobrze na każdym ekranie. Spróbuj przesunąć suwak na górze strony jeszcze raz.