Folyadék tipográfia - CSS-trükkök

A kódhoz való hozzáféréshez itt van egy működő megvalósítás:

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

Érdemes megnézni egy újabb, Egyszerűsített folyadék tipográfia című bejegyzésünket a praktikus, rögzített, nézetablak-alapú típusméretezéshez.

Ez a méret font-sizelegalább 16 képpontból (320 képpont méretű nézetablakból) maximum 22 képpontosra (1000 képpont méretű nézetablakra) terjedne. Itt van ennek egy bemutatója, de mint Sass @mixin (amiről később beszámolunk).

Lásd Chris Coyier (@chriscoyier) tollalap-példáját a folyadéktípusról a Sass-on a CodePen-en.

A Sass-t csak arra használták, hogy ezt a kimenetet egy kicsit könnyebben lehessen előállítani, és azt, hogy a matematika elcsúszik. Lássuk.

A nézetablakok használatával a calc()betűméretet (és egyéb tulajdonságokat) beállíthatjuk méretükhöz a képernyő mérete alapján. Tehát ahelyett, hogy mindig ugyanolyan méretű lenne, vagy a médiakérdéseknél egyik méretről a másikra ugrálna, a méret lehet folyékony.

Itt van a matematika, hitel Mike Riethmuller:

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

A matematika kissé bonyolult oka az, hogy megpróbáljuk elkerülni, hogy a típus mindig kisebb legyen, mint a minimum, vagy nagyobb, mint a maximum, ami nagyon egyszerű a nézetablak-egységekkel.

Például, ha azt akarjuk, hogy a betűméretünk olyan tartományban legyen, ahol 14pxa legkisebb méret a legkisebb nézetablak-szélességnél, 300pxés ahol 26pxa maximális méret a legnagyobb nézetablak-szélességnél 1600px, akkor az egyenletünk így néz ki:

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

A szöveg folyékonyan változik a nézet szélességére

Lásd a CSS-Tricks (@ css-tricks) Toll JEVevK-t a CodePen-en.

A minimális és maximális méret rögzítéséhez segítséget nyújt a matematika használata a média lekérdezésekben. Itt van néhány Sass, aki segít ...

Sass-ban

Készíthet egy (elég robusztus) keveréket, például:

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

Amit így használ:

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

Itt van Mike egy másik példája, amely megfelelő ritmust kap:

Az ötlet kiterjesztése a fejlécekre moduláris skálával

Moduláris skála, vagyis minél több hely áll rendelkezésre, annál drámaibb a méret. Talán a legnagyobb nézetablaknál a hierarchia minden egyes fejléce 1,4-szer nagyobb, mint a következő, de legkisebb esetben csak 1,05-szeres.

Nézet megtekintése:

A @MikeRiethmullertől ellopott „Fluid Type” i̶n̶s̶p̶i̶r̶e̶d̶ mostantól a @CodePen blogjain él. Beleértve a „Fluid Modular Scale!” pic.twitter.com/0yJk8Iq8fR

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

A Sass mixerünkkel ez így néz ki:

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