Жидкостная типография онлайн урок.


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

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 (в окне просмотра 320 пикселей) до максимум 22px (в окне просмотра 1000px). Вот демонстрация этого, но как Sass @mixin (который мы рассмотрим позже).

Сасс использовался только для того, чтобы сделать этот вывод немного легче сгенерированным, а также тот факт, что в нем участвовала математика. Давайте взглянем.

Используя единицы просмотра и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)));
}
Текст изменяется плавно на ширину окна просмотра

Чтобы заблокировать эти минимальные и максимальные размеры, эта математика в запросах на медиа помогает. Вот немного Sass, чтобы помочь...

# В Sass

Вы можете создать (довольно надежный) mixin, например:

@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.05x.

См. Просмотр:

С помощью нашего 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);
}

# Другое чтение