Флуидна типографија - ЦСС-трикови

Преглед садржаја

Да стигнемо право до кода, ево радне имплементације:

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

Вреди погледати наш новији пост Поједностављена флуидна типографија за практично, стегнуто и засновано на видном пољу.

То би font-sizeсе смањило од најмање 16 пиксела (у видном пољу од 320 пиксела) до максималних 22 пиксела (код 1000 пиксела). Ево демо тога, али као Сасс @ микин (који ћемо обрадити касније).

Погледајте Пример основе оловке Флуид Типе в Сасс аутора Цхрис Цоииер (@цхрисцоииер) на ЦодеПен-у.

Сасс је коришћен само да би се мало лакше генерисало то излагање и чињеница да је у питању математички смешак. Хајде да погледамо.

Коришћењем јединица за приказ и calc()можемо да прилагодимо величину фонта (и друга својства) њиховој величини на основу величине екрана. Дакле, уместо да увек буде исте величине или скаче с једне величине на другу на медијским упитима, величина може бити променљива.

Ево математике, заслуга Микеа Риетхмуллера:

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

Разлог што је математика мало компликована је тај што покушавамо да избегнемо да тип икад буде мањи од нашег минимума или већи од нашег максимума, што је врло лако учинити са јединицама за приказ.

На пример, ако желимо да наша величина фонта буде у опсегу где 14pxје најмања величина на најмањој ширини видног поља 300pxи где 26pxје максимална величина на највећој ширини видног поља 1600px, онда наша једначина изгледа овако:

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

Текст се флуидно мења у ширину оквира за приказ

Погледајте оловку ЈЕВевК од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.

Да бисте закључали те минималне и максималне величине, помаже вам коришћење ове математике у упитима за медије. Ево неколико Сасс-а за помоћ ...

У Сасу

Можете направити (прилично робустан) миксин, попут овог:

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

Који користите овако:

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

Ево још једног Микеовог примера, како постићи тачан ритам како треба:

Проширивање идеје на заглавља са модуларном скалом

Модуларна скала, што значи да што је више простора на располагању, то је величина драматичнија. Можда је у највећем прозору са, свако заглавље хијерархије горе за 1,4 пута веће од следећег, али у најмањем, само 1,05 пута.

Погледајте поглед:

„Флуид Типе“ инспиред украден из @МикеРиетхмуллер сада живи на блоговима @ЦодеПен. Укључујући „Флуид Модулар Сцале!“ пиц.твиттер.цом/0иЈк8Ик8фР

- Цхрис Цоииер (@цхрисцоииер) 27. октобра 2016

Са нашим Сасс микин-ом то изгледа овако:

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