Fluidna tipografija - CSS-trikovi

Da odmah pristupimo kodu, evo radne implementacije:

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; ) )

Vrijedno je pogledati naš noviji post Pojednostavljena fluidna tipografija za praktično dimenzioniranje na osnovi okvira za vid.

To bi se font-sizesmanjilo s najmanje 16 piksela (u vidnom polju s 320 piksela) na maksimalnih 22 piksela (na 1000 piksela u vizualnom okviru). Evo demo o tome, ali kao Sass @mixin (koji ćemo obraditi kasnije).

Pogledajte Primjer olovke za tekući tip w Sass Chris Coyiera (@chriscoyier) na CodePenu.

Sass je korišten samo da bi se malo lakše generiralo taj rezultat i činjenica da je u pitanju matematički smisao. Pogledajmo.

Koristeći jedinice okvira za prikaz i calc(), možemo dobiti veličinu fonta (i druga svojstva) da prilagode njihovu veličinu na temelju veličine zaslona. Umjesto da uvijek bude iste veličine ili skače s jedne veličine na drugu na medijskim upitima, veličina može biti fluidna.

Evo matematike, zasluga Mikea Riethmullera:

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

Razlog što je matematika malo komplicirana jest taj što pokušavamo izbjeći da tip ikad bude manji od našeg minimuma ili veći od našeg maksimuma, što je vrlo lako učiniti s jedinicama prikaza.

Na primjer, ako želimo da naša veličina fonta bude u rasponu gdje 14pxje najmanja veličina na najmanjoj širini prozora 300pxi gdje 26pxje najveća veličina na najvećoj širini prozora 1600px, tada naša jednadžba izgleda ovako:

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

Tekst se fluidno mijenja u širinu okvira za prikaz

Pogledajte Pen JEVevK by CSS-Tricks (@ css-tricks) na CodePenu.

Za zaključavanje tih minimalnih i maksimalnih veličina pomaže vam korištenje ove matematike u upitima za medije. Evo nekoliko Sass-a za pomoć ...

U Sassu

Možete napraviti (prilično robustan) mixin, poput ovog:

@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; ) ) ) )

Koji koristite ovako:

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

Evo još jednog Mikeova primjera za postizanje fluidnog ritma baš kako treba:

Proširivanje ideje na zaglavlja s modularnom skalom

Modularna skala, što znači da što je više prostora na raspolaganju, to je veličina dramatičnija. Možda je u najvećem prozoru s, svako zaglavlje hijerarhije gore 1,4 puta veće od sljedećeg, ali na najmanjem, samo 1,05x.

Vidi pogled:

“Fluid Type” i̶n̶s̶p̶i̶r̶e̶d̶ ukraden iz @MikeRiethmuller sada živi na blogovima @CodePen. Uključujući "Fluid Modular Scale!" pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27. listopada 2016

Uz naš Sassov mixin, to izgleda ovako:

$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); )