Væsketypografi - CSS-triks

Få rett til koden, her er en fungerende implementering:

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 verdt å se på vårt nyere innlegg Forenklet væsketypografi for praktisk, fastspent, visningsbasert typestørrelse.

Det vil skaleres font-sizefra minimum 16 px (ved en 320px visningsport) til maksimalt 22px (ved en 1000px visningsport). Her er en demo av det, men som en Sass @mixin (som vi vil dekke senere).

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

Sass ble brukt bare for å gjøre produksjonen litt lettere å generere, og det faktum at det er en smule matematikk involvert. La oss ta en titt.

Ved hjelp av visningsenheter og calc()kan vi få skriftstørrelse (og andre egenskaper) til å justere størrelsen basert på størrelsen på skjermen. Så i stedet for å alltid være av samme størrelse, eller hoppe fra en størrelse til den neste ved mediespørsmål, kan størrelsen være flytende.

Her er matematikken, kreditt Mike Riethmuller:

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

Årsaken til at matematikk er litt komplisert, er at vi prøver å unngå at typen noen gang blir mindre enn vårt minimum eller større enn vårt maksimum, noe som er veldig enkelt å gjøre med visningsenheter.

For eksempel, hvis vi vil at skriftstørrelsen vår skal være i et område hvor 14pxminimumsstørrelsen er i den minste visningsportbredden 300pxog hvor 26pxden maksimale størrelsen er i den største visningsportbredden 1600px, så ser ligningen vår slik ut:

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

Teksten endres flytende til bredden på visningsområdet

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

For å låse de minste og maksimale størrelsene hjelper det å bruke denne matematikken i mediespørsmål. Her er noen Sass for å hjelpe ...

I Sass

Du kan lage en (ganske robust) mixin, slik:

@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 bruker slik:

$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 annet av Mike's eksempler, som får flytende rytme akkurat:

Utvide ideen til topptekster med modulær skala

Modulær skala, noe som betyr at jo mer plass som er tilgjengelig, jo mer dramatisk er forskjellen i størrelse. Kanskje i den største visningen med, er hver topptekst opp i hierarkiet 1,4 ganger større enn den neste, men i det minste bare 1,05 ganger.

Se visning:

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

- Chris Coyier (@chriscoyier) 27. oktober 2016

Med vår Sass mix, ser det ut 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); )