Nestemäinen typografia CSS-temppuja

Pääset suoraan koodiin, tässä on toimiva toteutus:

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

Kannattaa tutustua tuoreempaan tekstiin Yksinkertaistettu nestetyypityö käytännön, kiinnitettyyn, näkymäkohtaiseen tyyppikokoon.

Se skaalautuisi font-sizevähintään 16 kuvapisteestä (320 kuvapisteen kuvaportissa) enintään 22 kuvapisteeseen (1000 kuvapisteen kuvaportissa). Tässä on demo siitä, mutta Sass @mixinina (jonka käsittelemme myöhemmin).

Katso Chris Coyierin (@chriscoyier) kynän pohjaesimerkki nestetyypistä w Sass CodePenissä.

Sassia käytettiin vain tekemään tuotoksesta hieman helpompaa tuottaa ja se, että mukana on matematiikkaa. Katsotaanpa.

Näkymäikkunayksiköiden avulla calc()voimme saada kirjasinkoon (ja muut ominaisuudet) säätämään niiden kokoa näytön koon mukaan. Joten sen sijaan, että se olisi aina samankokoinen tai hyppää yhdestä koosta toiseen mediakyselyissä, koko voi olla sujuva.

Tässä matematiikka, luotto Mike Riethmuller:

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

Syy siihen, että matematiikka on hieman monimutkaista, on se, että yritämme välttää tyypin koskaan pienenemän pienemmäksi tai suuremmaksi kuin maksimi, mikä on erittäin helppo tehdä näkymäyksiköillä.

Esimerkiksi, jos haluamme kirjasinkoon alueelle, jossa 14pxon pienin koko pienimmällä näkymän leveydellä 300pxja missä 26pxsuurin koko on suurimmalla näkymän leveydellä 1600px, yhtälömme näyttää tältä:

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

Teksti muuttuu sujuvasti näkymän leveydeksi

Katso CSS-Tricksin kynä JEVevK (@ css-tricks) CodePenistä.

Näiden vähimmäis- ja enimmäiskokojen lukitseminen auttaa tämän matematiikan käytöstä mediakyselyissä. Tässä on joitain Sassia auttamaan ...

Sassissa

Voit tehdä (melko vankan) sekoituksen, kuten tämä:

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

Jota käytät tällä tavalla:

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

Tässä on toinen Mike-esimerkki, joka saa rytmisen rytmin oikein:

Idean laajentaminen moduulilla varustettuihin otsikoihin

Modulaarinen asteikko, eli mitä enemmän tilaa on käytettävissä, sitä dramaattisempi on erikoko. Ehkä suurimmalla näkymällä, kukin hierarkian ylätunniste on 1,4 kertaa suurempi kuin seuraava, mutta pienimmillään vain 1,05 kertaa.

Katso näkymä:

@MikeRiethmullerilta varastettu “Fluid Type” i̶n̶s̶p̶i̶r̶e̶d̶ elää nyt @CodePen -blogeissa. Sisältää "Fluid Modular Scale!" pic.twitter.com/0yJk8Iq8fR

- Chris Coyier (@chriscoyier) 27. lokakuuta 2016

Sass-sekoituksemme näyttää tältä:

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