Typografia tekutín Triky CSS

Ak sa chcete dostať k kódu, tu je funkčná implementácia:

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

Stojí za to pozrieť sa do nášho najnovšieho príspevku Zjednodušená fluidná typografia, ktorý ponúka praktické, upnuté, veľkosť výrezu.

To by sa zmenšilo font-sizeod minimálne 16 pixelov (vo výreze 320 pixelov) po maximum 22 pixelov (vo výreze 1 000 pixelov). Toto je ukážka, ale ako Sass @mixin (ktorej sa budeme venovať neskôr).

Pozrite si príklad základne pera typu Fluid w Sass od Chrisa Coyiera (@chriscoyier) na stránke CodePen.

Sass bol použitý len na to, aby bol tento výstup o niečo ľahší na generovanie, a na to, že je tu zahrnutá závetina matematiky. Pozrime sa.

Pomocou zobrazovacích jednotiek a calc()môžeme nechať veľkosť písma (a ďalšie vlastnosti) upraviť ich veľkosť na základe veľkosti obrazovky. Takže namiesto toho, aby ste mali vždy rovnakú veľkosť alebo aby ste pri mediálnych dotazoch preskakovali z jednej veľkosti na druhú, môže byť veľkosť premenlivá.

Tu je matematika, kredit Mike Riethmuller:

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

Matematika je trochu komplikovaná tým, že sa snažíme vyhnúť tomu, aby sa typ zmenšoval nad naše minimum alebo bol väčší ako naše maximum, čo sa s výrezovými jednotkami dá ľahko urobiť.

Napríklad, ak chceme, aby naša veľkosť písma bola v rozsahu, kde 14pxje minimálna veľkosť pri najmenšej šírke výrezu 300pxa kde 26pxje maximálna veľkosť pri najväčšej šírke výrezu 1600px, potom naša rovnica vyzerá takto:

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

Prezrite si Pen JEVevK od CSS-Tricks (@ css-tricks) na CodePen.

Ak chcete uzamknúť tieto minimálne a maximálne veľkosti, pomôže vám táto matematika v rámci mediálnych dotazov. Tu je niekoľko Sassov, ktorí vám pomôžu ...

V Sass

Môžete vytvoriť (celkom robustný) mixin, ako je tento:

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

Ktoré takto používate:

$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 ďalší z Mikeových príkladov, ako dosiahnuť správny pohybový rytmus:

Rozšírenie nápadu o hlavičky pomocou modulárnej mierky

Modulárna mierka, čo znamená, že čím viac voľného miesta je k dispozícii, tým dramatickejšia je rozdielna veľkosť. Možno v najväčšom výreze s je každá hlavička v hierarchii 1,4-krát väčšia ako nasledujúca, ale v najmenšej iba 1,05-násobná.

Zobraziť pohľad:

„Fluid Type“ i̶n̶s̶p̶i̶r̶e̶d̶ ukradnutý z @MikeRiethmuller teraz žije na blogoch @CodePen. Vrátane „Fluid Modular Scale!“ pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27. októbra 2016

S našim mixom Sass to vyzerá takto:

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