Плавная типография - CSS-хитрости

Перейдя непосредственно к коду, вот рабочая реализация:

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

Стоит взглянуть на нашу недавнюю публикацию Simplified Fluid Typography для практического, ограниченного размера шрифта на основе области просмотра.

Это будет масштабироваться font-sizeот минимум 16 пикселей (в области просмотра 320 пикселей) до максимум 22 пикселей (в области просмотра 1000 пикселей). Вот демонстрация этого, но в виде Sass @mixin (о котором мы поговорим позже).

См. Пример Pen Base Example of Fluid Type w Sass от Криса Койера (@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 ...

В 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. Включая «Модульные весы для жидкости!» pic.twitter.com/0yJk8Iq8fR

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

С нашим миксином Sass это выглядит так:

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