Skysčių tipografija CSS-gudrybės

Kaip naudotis kodu, štai kas veikia:

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

Verta pažvelgti į mūsų naujausią įrašą „Supaprastinta skysčių tipografija“, kad būtų galima praktiškai pritaikyti, pritvirtintus, peržiūros srities tipus.

Tai būtų mastelis font-sizenuo mažiausiai 16 taškų (320 taškų peržiūros srityje) iki didžiausio 22 taškų (esant 1000 taškų peržiūros rėmui). Čia yra to demonstracinė versija, bet kaip „Sass @mixin“ (kurią pristatysime vėliau).

Žr. Chriso Coyierio (@chriscoyier) skysčio tipo w Sass rašiklio pagrindo pavyzdį „CodePen“.

„Sass“ buvo naudojamas tik tam, kad tą išvestį būtų šiek tiek lengviau generuoti, ir tai, kad matematika yra smarki. Pažiūrėkime.

Naudodami peržiūros srities rinkinius ir calc()galime leisti šrifto dydžiui (ir kitoms savybėms) pakoreguoti jų dydį pagal ekrano dydį. Taigi, užuot visada būdami vienodo dydžio ar peršokdami iš vieno dydžio į kitą, kai kreipiatės į žiniasklaidą, dydis gali būti platus.

Štai matematikos įskaita Mike'as Riethmulleris:

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

Matematikos šiek tiek sudėtinga priežastis yra ta, kad mes stengiamės išvengti, kad tipas niekada nebūtų mažesnis nei mūsų minimumas arba didesnis už maksimalų, o tai labai lengva padaryti su peržiūros srities vienetais.

Pvz., Jei norime, kad šrifto dydis būtų diapazone, kuriame 14pxyra mažiausias dydis mažiausiu peržiūros srities plotu 300pxir kur 26pxmaksimalus dydis didžiausiu peržiūros srities plotu 1600px, tada mūsų lygtis atrodo taip:

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

Tekstas sklandžiai keičiasi į peržiūros srities plotį

Peržiūrėkite „CSS-Tricks“ rašiklį „JEVevK“ (@ css-tricks) „CodePen“.

Norėdami užfiksuoti tuos minimalius ir maksimalius dydžius, naudinga naudoti šią matematiką medijos užklausose. Štai keletas Sassų, kurie padės ...

Sass

Galite sukurti (gana tvirtą) mišinį, pavyzdžiui:

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

Kurį naudojate taip:

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

Štai dar vienas Mike'o pavyzdys, kuris suteikia sklandų ritmą teisingai:

Idėjos išplėtimas antraštėms su moduline skale

Modulinė skalė, ty kuo daugiau vietos, tuo dramatiškesnis yra skirtingas dydis. Galbūt, esant didžiausiai peržiūros sričiai, kiekviena hierarchijos antraštė yra 1,4 karto didesnė nei kita, bet mažiausia - tik 1,05 karto.

Žiūrėti vaizdą:

„Fluid Type“ i̶n̶s̶p̶i̶r̶e̶d̶, pavogtas iš @MikeRiethmuller, dabar veikia @CodePen tinklaraščiuose. Įskaitant „Fluid Modular Scale!“ pic.twitter.com/0yJk8Iq8fR

- Chrisas Coyieris (@chriscoyier) 2016 m. Spalio 27 d

Su mūsų „Sass“ mišiniu tai atrodo taip:

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