Væsketypografi - CSS-tricks | Kodestykker 2025

At få ret til koden, her er en implementering, der fungerer:

html ( font-size: 16px; ) @media screen and (min-width: 320px) ( html ( font-size: calc(16px + 6 * ((100vw - 320px) / 680)); ) ) @media screen and (min-width: 1000px) ( html ( font-size: 22px; ) )

Det er værd at se på vores nyere indlæg Forenklet væsketypografi for praktisk, fastspændt, visningsbaseret typestørrelse.

Det skaleres font-sizefra mindst 16 pixel (ved en 320 pixes visningsport) til et maksimum på 22 pixel (ved en 1000 pixes visningsport). Her er en demo af det, men som en Sass @mixin (som vi vil dække senere).

Se penbaseeksemplet på væsketype w Sass af Chris Coyier (@chriscoyier) på CodePen.

Sass blev brugt bare for at gøre det output lidt lettere at generere, og det faktum, at der er en smule matematik involveret. Lad os se.

Ved hjælp af viewport-enheder calc()kan vi have skriftstørrelse (og andre egenskaber) til at justere deres størrelse baseret på skærmens størrelse. Så i stedet for altid at være den samme størrelse eller springe fra den ene størrelse til den næste ved medieforespørgsler, kan størrelsen være flydende.

Her er matematikken, kredit Mike Riethmuller:

body ( font-size: calc((minimum size) + ((maximum size) - (minimum size)) * ((100vw - (minimum viewport width)) / ((maximum viewport width) - (minimum viewport width)))); )

Årsagen til, at matematik er lidt kompliceret, er, at vi forsøger at undgå, at typen nogensinde bliver mindre end vores minimum eller større end vores maksimum, hvilket er meget let at gøre med visningsenheder.

For eksempel, hvis vi vil have vores skriftstørrelse i et interval, hvor 14pxminimumsstørrelsen er ved den mindste visningsportbredde, 300pxog hvor 26pxden maksimale størrelse er ved den største visningsportbredde 1600px, så ser vores ligning sådan ud:

body ( font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); )

Teksten skifter flydende til bredden på visningen

Se pennen JEVevK af CSS-Tricks (@ css-tricks) på CodePen.

For at låse disse minimums- og maksimumstørrelser ind ved hjælp af denne matematik i medieforespørgsler hjælper det. Her er nogle Sass, der kan hjælpe ...

I Sass

Du kunne lave en (temmelig robust) mixin som denne:

@function strip-unit($value) ( @return $value / ($value * 0 + 1); ) @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) ( $u1: unit($min-vw); $u2: unit($max-vw); $u3: unit($min-font-size); $u4: unit($max-font-size); @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 ( & ( font-size: $min-font-size; @media screen and (min-width: $min-vw) ( font-size: calc(#($min-font-size) + #(strip-unit($max-font-size - $min-font-size)) * ((100vw - #($min-vw)) / #(strip-unit($max-vw - $min-vw)))); ) @media screen and (min-width: $max-vw) ( font-size: $max-font-size; ) ) ) )

Som du bruger sådan:

$min_width: 320px; $max_width: 1200px; $min_font: 16px; $max_font: 24px; html ( @include fluid-type($min_width, $max_width, $min_font, $max_font); )

Her er et andet af Mike's eksempler, der får flydende rytme lige rigtigt:

Udvidelse af ideen til overskrifter med modulær skala

Modulær skala, hvilket betyder, at jo mere plads, desto mere dramatisk er forskellen i størrelse. Måske i det største visningsområde med, er hvert overskrift op hierarkiet 1,4 gange større end det næste, men i det mindste kun 1,05 gange.

Se visning:

“Fluid Type” i̶n̶s̶p̶i̶r̶e̶d̶ stjålet fra @MikeRiethmuller lever nu på @CodePen-blogs. Inkluderet "Fluid Modular Scale!" pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27. oktober 2016

Med vores Sass mix, ser det ud som:

$mod_1: 1.2; // mobile $mod_2: 1.5; // desktop h1 ( font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h2 ( font-size: $mod_1*$mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1*$mod_1 *$min_font, $mod_2*$mod_2*$mod_2 *$min_font); ) h3 ( font-size: $mod_1*$mod_1 *1rem; @include fluid-type($min_width, $max_width, $mod_1*$mod_1 *$min_font, $mod_2*$mod_2 *$min_font); )