Адаптивная типографика

Автор: Geoff Graham    Источник: css-tricks.com
27.02.2017
907
0
img

Используя мета тег viewport и функцию calc(), можно настраивать размер шрифта (и других свойств) на основе размера экрана. То есть вместо того, чтобы использовать всегда один и тот же размер, или прыгать от одного размера к другому, как в media queries, можно сделать размер гибким.

Вот расчеты Майка Рисмуллера (Mike Riethmuller):

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

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

К примеру, если мы хотим, чтобы размер шрифта был в определенном диапазоне, где 16px – это минимальный размер для самых маленьких экранов шириной 300px, а 26px – максимальный размер для больших экранов шириной 1600px, тогда наша формула будет выглядеть так:

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

See the Pen JEVevK by CSS-Tricks (@css-tricks) on CodePen.

Удержаться в рамках этих размеров поможет использование этой формулы в media queries. Вот пример на 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.

Используя наш миксин, это будет выглядеть так:

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

ПОХОЖИЕ СТАТЬИ: