Vedeliku tüpograafia CSS-trikid

Koodi juurde jõudmiseks on siin toimiv rakendus:

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

Praktilise, kinnitatud, vaateava põhise tüübi suuruse määramiseks tasub vaadata meie uuemat postitust Lihtsustatud vedeliku tüpograafia.

Selle suurus oleks font-sizevähemalt 16 pikslit (320 pikslit kuvavaates) kuni maksimaalselt 22 pikslit (1000 pikslit). Siin on selle demo, kuid kui Sass @mixin (mida kajastame hiljem).

Vaadake Chris Coyieri (@chriscoyier) pliiatsibaasi näite vedeliku tüübist w Sass CodePenil.

Sassi kasutati lihtsalt selle väljundi genereerimise veidi lihtsamaks muutmiseks ja asjaolu, et sellega on seotud matemaatika. Vaatame järele.

Kasutades vaateava ühikuid ja calc()saame lasta fondi suurusel (ja muudel omadustel) nende suurust ekraani suuruse järgi reguleerida. Seega selle asemel, et meediumipäringutel alati sama suurus olla või hüpata ühest suurusest teise, võib suurus olla sujuv.

Siin on matemaatika, krediit Mike Riethmuller:

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

Matemaatika pisut keerukas põhjus on see, et püüame vältida seda, et tüüp ei jääks alati väiksemaks kui meie miinimum või suurem kui maksimaalne, mida on vaateakna üksustega väga lihtne teha.

Näiteks kui soovime, et meie fondi suurus oleks vahemikus, kus 14pxon minimaalne suurus kõige väiksema vaateava laiuse juures 300pxja kus 26pxon maksimaalne suurus suurima vaateava laiusega 1600px, siis näeb meie võrrand välja järgmine:

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

Vaadake CodeSenil CSS-Tricksi sulepea JEVevK (@ css-tricks).

Nende miinimum- ja maksimaalsuuruste lukustamiseks aitab selle matemaatika kasutamine meediumipäringutes. Siin on mõned Sassid, kes aitavad teil…

Sassis

Võite teha (päris tugeva) segu, näiteks:

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

Mida kasutate niimoodi:

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

Siin on veel üks Mike'i näide, kuidas saada voolav rütm täpselt õigeks:

Idee laiendamine moodulkaalaga päistele

Modulaarne skaala, mis tähendab, et rohkem ruumi on saadaval, seda dramaatilisem on erinev suurus. Võib-olla on kõige suuremas vaateaknas iga hierarhia peal olev päis järgmisest 1,4x suurem, kuid kõige vähem vaid 1,05x.

Vaata vaadet:

@MikeRiethmullerilt varastatud „Fluid Type” i̶n̶s̶p̶i̶r̶e̶d̶ elab nüüd @CodePen ajaveebides. Sealhulgas “Fluid Modular Scale!” pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27. oktoober 2016

Meie Sassi segistiga näeb see välja selline:

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