Флуидна типография - CSS-трикове | Кодови фрагменти 2025

За да стигнем точно до кода, ето една работеща реализация:

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от минимум 16px (при 320px viewport) до максимум 22px (при 1000px viewport). Ето демонстрация на това, но като Sass @mixin (която ще разгледаме по-късно).

Вижте Примера на основата на писалка за флуиден тип w Sass от Chris Coyier (@chriscoyier) на CodePen.

Sass беше използван само за да направи този изход малко по-лесен за генериране и фактът, че има усмивка от математика. Нека да разгледаме.

Използвайки единици за преглед и 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))); )

Текстът се променя плавно до ширината на прозореца за гледане

Вижте Pen JEVevK от CSS-Tricks (@ css-tricks) на CodePen.

За да заключите тези минимални и максимални размери, използването на тази математика в медийните заявки помага. Ето малко Sass за помощ ...

В Сас

Можете да направите (доста здрав) миксин, като този:

@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 пъти.

Вижте изглед:

„Тип флуид“ i̶n̶s̶p̶i̶r̶e̶d̶, откраднат от @MikeRiethmuller, вече е на живо в блоговете @CodePen. Включително „Fluid Modular Scale!“ pic.twitter.com/0yJk8Iq8fR

- Крис Койер (@chriscoyier) 27 октомври 2016 г.

С нашия Sass mixin това изглежда така:

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