Šķidruma tipogrāfija CSS-triki

Lai piekļūtu kodam, šeit ir ieviests efektīvs ieviešana:

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

Ir vērts aplūkot mūsu jaunāko ziņu Vienkāršotā šķidruma tipogrāfija, lai iegūtu praktisku, saspiestu, skatu centrā balstītu tipu lielumu.

Tas tiktu font-sizemērogots no vismaz 16 pikseļiem (320 pikseļu skata portā) līdz maksimāli 22 pikseļiem (ar 1000 pikseļu skata portu). Šeit ir šī demonstrācija, bet kā Sass @mixin (kuru mēs apskatīsim vēlāk).

Sk. Krāsa Koijera (@chriscoyier) šķidruma tipa w Sass pildspalvas bāzes piemēru vietnē CodePen.

Sass tika izmantots tikai tāpēc, lai šo rezultātu būtu mazliet vieglāk ģenerēt, un to, ka tajā ir iesaistīta matemātika. Apskatīsim.

Izmantojot skata loga vienības un calc(), mēs varam likt fonta lielumam (un citām īpašībām) pielāgot to lielumu, pamatojoties uz ekrāna lielumu. Tāpēc tā vietā, lai vienmēr būtu vienāda lieluma vai lēktu no viena lieluma uz nākamo multivides vaicājumos, izmērs var būt plāns.

Lūk, matemātika, kredīts Maiks Rietmullers:

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

Matemātika ir nedaudz sarežģīta tāpēc, ka mēs cenšamies izvairīties no tā, ka tips vienmēr kļūst mazāks par mūsu minimālo vai lielāks par maksimālo, ko ir ļoti viegli izdarīt ar skatu vienībām.

Piemēram, ja mēs vēlamies, lai mūsu fonta lielums būtu diapazonā, kur 14pxminimālais izmērs ir mazākais skata loga platums 300pxun kur 26pxmaksimālais lielums ir lielākais skata loga platums 1600px, tad mūsu vienādojums izskatās šādi:

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

Skatiet CSS-Tricks Pen JEVevK (@ css-tricks) vietnē CodePen.

Lai fiksētu šos minimālos un maksimālos izmērus, palīdz šī matemātika, izmantojot multivides vaicājumus. Šeit ir daži Sass, kas palīdzēs ...

Sassā

Jūs varētu izveidot (diezgan izturīgu) maisījumu, piemēram:

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

Ko jūs izmantojat šādi:

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

Šeit ir vēl viens no Maika piemēriem, kā iegūt šķidruma ritmu tieši:

Idejas paplašināšana uz galvenēm ar moduļu mērogu

Moduļu skala, kas nozīmē, jo vairāk vietas ir pieejama, jo dramatiskāks ir atšķirīgais izmērs. Iespējams, ka vislielākajā skatījuma logā katra hierarhijas augšdaļa ir 1,4 reizes lielāka nekā nākamā, bet vismazāk - tikai 1,05 reizes.

Skatīt skatu:

@MikeRiethmuller nozagtais “Fluid Type” i̶n̶s̶p̶i̶r̶e̶d̶ tagad ir pieejams @CodePen emuāros. Ieskaitot “Fluid Modular Scale!” pic.twitter.com/0yJk8Iq8fR

- Kriss Koijers (@chriscoyier) 2016. gada 27. oktobris

Izmantojot mūsu Sass maisījumu, tas izskatās šādi:

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