Fluidna tipografija - CSS-triki

Ko pridemo desno do kode, je tukaj delovna izvedba:

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

Vredno si je ogledati našo najnovejšo objavo Poenostavljena tipografija tekočin za praktično, vpeto velikost, ki temelji na pogledu.

To bi se font-sizerazširilo od najmanj 16 slikovnih pik (pri vidnem polju 320 slikovnih pik) do največ 22 slikovnih pik (pri oknu 1000 slikovnih pik). Tukaj je predstavitev tega, vendar kot Sass @mixin (ki jo bomo obravnavali kasneje).

Oglejte si primer pisala za tekočino tipa S Sass Chris Coyier (@chriscoyier) na CodePen.

Sass je bil uporabljen samo zato, da je bil ta izhod nekoliko lažji za ustvarjanje, in dejstvo, da gre za matematiko. Oglejmo si.

Z uporabo enot za ogled in calc()lahko velikost pisave (in druge lastnosti) prilagodimo njihovo velikost glede na velikost zaslona. Torej, ne da bi bila vedno enaka ali preskakovanja z ene na drugo pri medijskih poizvedbah, je lahko velikost spremenljiva.

Tu je matematika, priznanje Mike Riethmuller:

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

Razlog za to, da je matematika nekoliko zapletena, je, da se trudimo, da se tip, ki bi bil kdaj manjši od našega najmanjšega ali večji od našega največjega, kar je zelo enostavno narediti z enotami za prikaz.

Na primer, če želimo, da je naša velikost pisave v obsegu, kjer 14pxje najmanjša velikost pri najmanjši širini prikaza 300pxin kjer 26pxje največja velikost pri največji širini vidnega polja 1600px, potem je naša enačba videti takole:

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

Besedilo se tekoče spremeni v širino vidnega polja

Oglejte si Pen JEVevK by CSS-Tricks (@ css-tricks) na CodePen.

Če želite zakleniti te najmanjše in največje velikosti, pomaga uporaba te matematike v medijskih poizvedbah. Tukaj je nekaj Sass za pomoč ...

V Sass

Lahko bi naredili (precej trden) mixin, kot je ta:

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

Ki ga uporabljate takole:

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

Tu je še en Mikov primer, kako ravno tekoč ritem doseči:

Razširitev ideje na glave z modularno lestvico

Modularna lestvica, kar pomeni, da več prostora je na voljo, bolj dramatična je različna velikost. Morda je v največjem vidnem polju z vsakim glavo navzgor po hierarhiji 1,4-krat večji od naslednjega, na najmanjšem pa le 1,05-krat.

Glej pogled:

"Fluid Type" i̶n̶s̶p̶i̶r̶e̶d̶, ukraden @MikeRiethmuller, zdaj v živo v blogih @CodePen. Vključno s "Fluid Modular Scale!" pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27. oktober 2016

Z našim mešalnikom Sass je to videti tako:

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