Vätsketypografi - CSS-tricks

Få rätt till koden, här är en fungerande 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 är värt att titta på vårt nyare inlägg Förenklad vätsketypografi för praktisk, fastspänd, visningsbaserad typstorlek.

Det skulle skala font-sizefrån minst 16 pixlar (vid 320px visningsport) till maximalt 22px (vid 1000px visningsport). Här är en demo av det, men som en Sass @mixin (som vi kommer att täcka senare).

Se Pen Base Exempel på vätsketyp w Sass av Chris Coyier (@chriscoyier) på CodePen.

Sass användes bara för att göra den produktionen lite lättare att generera, och det faktum att det är en del matematik involverad. Låt oss ta en titt.

Med hjälp av visningsenheter och calc()kan vi få teckensnittsstorlek (och andra egenskaper) att justera deras storlek baserat på skärmens storlek. Så snarare än att alltid ha samma storlek, eller hoppa från en storlek till nästa vid mediefrågor, kan storleken vara flytande.

Här är matematiken, kredit Mike Riethmuller:

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

Anledningen till att matematik är lite komplicerat är att vi försöker undvika att typ någonsin blir mindre än vårt minimum eller större än vårt maximum, vilket är väldigt enkelt att göra med visningsenheter.

Om vi till exempel vill ha vår teckensnittsstorlek i ett intervall där 14pxden minsta storleken är vid den minsta visningsportbredden 300pxoch var 26pxden maximala storleken är vid den största visningsportbredden 1600px, ser vår ekvation ut så här:

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

Texten ändras flytande till bredden på visningsområdet

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

För att låsa in de minsta och maximala storleken hjälper det att använda denna matematik i mediefrågor. Här är lite Sass som hjälper ...

I Sass

Du kan göra en (ganska robust) mixin, så här:

@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 använder så här:

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

Här är ytterligare ett av Mike: s exempel som får flytande rytm precis rätt:

Utöka idén till rubriker med modulär skala

Modulär skala, vilket innebär att ju mer utrymme som finns, desto mer dramatiskt är skillnaden i storlek. Kanske vid det största visningsområdet med är varje rubrik upp i hierarkin 1,4 gånger större än nästa, men i det minsta, bara 1,05 gånger.

Se vy:

“Fluid Type” i̶n̶s̶p̶i̶r̶e̶d̶ stulna från @MikeRiethmuller lever nu på @CodePen-bloggar. Inklusive "Fluid Modular Scale!" pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27 oktober 2016

Med vår Sass-mixning 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); )