§ 15

Rozmiar czcionki płynnej z clamp()

Jakie liczby powinny być w moim clamp()?

Odpowiedź: Nagłówek powinien wynosić np. 28 px na telefonie i 48 px na dużym ekranie i rosnąć równomiernie pomiędzy. To robi clamp(min, stała część + nachylenie·vw, max). Wpisz rozmiar czcionki i szerokość okienka widoku na obu końcach, a kalkulator oblicy stałą część w rem i nachylenie w vw, i co czcionka będzie przy szerokości, którą chcesz przetestować.

Wzór

Hældning = (maks. skrift − min. skrift) ÷ (bred viewport − smal viewport). I vw: × 100, fordi 1vw = 1 % af viewport-bredden.

Fast del = min. skrift − hældning × smal viewport, omregnet til rem: ÷ rod-størrelsen

CSS: font-size: clamp(min rem, stała część rem + nachylenie vw, maks rem)

Skrift ved bredden x = min. skrift + hældning × (x − smal viewport), holdt mellem min og maks

Symbole i jednostki we wzorze
Symbol	Znaczenie	Jednostka
min_px	Rozmiar czcionki na wąskim ekranie	px
maks_px	Rozmiar czcionki na szerokim ekranie	px
min_vw_px	Szerokość wąskiego widoku	px
maks_vw_px	Szerokość zakresu przeglądarki	px
rod_px	Rozmiar czcionki głównej (1 pas)	px
test_vw_px	Testuj w szerokości okienka przeglądarki	px
=	Nachylenie (człon środkowy w vw)	vw
=	Część stała (środek paska)	rem
=	Minimum na pasku	rem
=	Maksimum na pasku	rem
=	Rozmiar czcionki przy testowej szerokości	px

Ważność i źródło

Źródło: CSS Values 4 · clamp() i jednostka vw (W3C/MDN) · metoda z Utopia.fyi

Nie dotyczy, gdy

Użyj rem w części stałej, nie tylko vw. Tekst skalowany tylko za pomocą vw nie rośnie, gdy użytkownik powiększa, i może przeforsować WCAG 1.4.4 (Zmiana rozmiaru tekstu). Utrzymuj maksimum co najwyżej około 2,5 × min., więc 200 % powiększenie nadal powoduje, że tekst jest większy.

Przykład obliczeniowy

Wstawiono domyślne wartości kalkulatora. Liczby obliczono dokładnie tym wzorem, którego używa narzędzie.

Wstawiono

Rozmiar czcionki na wąskim ekranie28 px
Rozmiar czcionki na szerokim ekranie48 px
Szerokość wąskiego widoku360 px
Szerokość zakresu przeglądarki1440 px
Rozmiar czcionki głównej (1 pas)16 px
Testuj w szerokości okienka przeglądarki768 px

Dawca

Nachylenie (człon środkowy w vw)1,852 vw
Część stała (środek paska)1,3333 rem
Minimum na pasku1,7500 rem
Maksimum na pasku3,0000 rem
Rozmiar czcionki przy testowej szerokości35,6 px

Tylko dla członków

Sam kalkulator jest zablokowane

Utwórz bezpłatne konto, aby odblokować wszystkie artykuły, kalkulatory, szablony i asortyment — i uzyskać dostęp do quizów i klas. Zajmuje to poniżej minuty: imię, email i hasło. Żadna karta kredytowa.

Utwórz darmowe konto →Zaloguj się

Chcesz najpierw czegoś spróbować? Zobacz, czego możesz używać bez konta — strefa junior, leksykon, filmy i więcej.

Sådan bruger du den

Flydende typografi lader overskrifter vokse jævnt fra mobil til desktop i stedet for at hoppe ved hvert breakpoint. Det gør du med clamp(), men midterleddet skal regnes ud. Beregneren giver den faste del i rem og hældningen i vw, så du kan skrive værdien direkte i CSS.

Krok za krokiem

Find skriftstørrelsen på den smalle skærm og på den brede skærm i designet.
Vælg de to viewport-bredder, hvor størrelserne skal gælde, fx 360 og 1440 px.
Hældningen er forskellen i skrift delt med forskellen i viewport. Gang med 100 for at få vw.
Den faste del er skriften på den smalle skærm minus hældningen gange den smalle bredde, delt med rod-størrelsen.
Skriv font-size: clamp(min rem, fast del rem + hældning vw, maks rem), og test med zoom på 200 %.

Typowe błędy

At skrive midterleddet kun i vw. Så vokser teksten ikke med browserens zoom, og siden kan fejle WCAG 1.4.4.
At bytte om på min og maks i clamp(). Det første tal skal være det mindste.
At glemme at regne den faste del om til rem. En fast del i px følger ikke brugerens skriftindstilling.
At skrive kommaet fra beregneren med i CSS. CSS bruger punktum: 1.3333rem.

Przykłady z codzienności

h1 på en kampagneside

En kampagneside for et fitnesscenter har h1 på 28 px på mobil (360 px) og 48 px på desktop (1440 px). Du vil se størrelsen på en iPad på 768 px.

Rozmiar czcionki na wąskim ekranie: 28 px
Rozmiar czcionki na szerokim ekranie: 48 px
Szerokość wąskiego widoku: 360 px
Szerokość zakresu przeglądarki: 1440 px
Rozmiar czcionki głównej (1 pas): 16 px
Testuj w szerokości okienka przeglądarki: 768 px

To znaczy: Midterleddet er 1,3333 oczep + 1,852 vw, så værdien bliver clamp(1,75 oczep, 1,3333 oczep + 1,852 vw, 3 oczep). På iPad'en bliver overskriften 35,6 px.

Brødtekst der vokser en smule

Brødteksten skal gå fra 16 px på 360 px til 20 px på 1280 px. Du tester på en bærbar på 1024 px.

Rozmiar czcionki na wąskim ekranie: 16 px
Rozmiar czcionki na szerokim ekranie: 20 px
Szerokość wąskiego widoku: 360 px
Szerokość zakresu przeglądarki: 1280 px
Rozmiar czcionki głównej (1 pas): 16 px
Testuj w szerokości okienka przeglądarki: 1024 px

To znaczy: Værdien bliver clamp(1 oczep, 0,9022 oczep + 0,435 vw, 1,25 oczep). Ved 1024 px er teksten 18,9 px.

Reguła praktyczna

Hold maks højst ca. 2,5 gange min, så 200 % zoom stadig gør teksten dobbelt så stor.

Jak sprawdzić odpowiedź

Sæt viewport-bredden i DevTools til den smalle og den brede værdi. Den beregnede font-size skal være præcis min og maks.