Адаптивный шрифт

CSS
h2 {
  /*font-size: 36px;*/

  font-size: calc(24px + 12 * (100vw / 1200));
}


@media (max-width: 767px) {
    h2 {
        font-size: calc(24px + (12 + 12 * 0.7) * ((100vw - 320px) / 1200));
    }
}

36 - макетный размер шрифта
24 - минимальный размер шрифта
36-24=12
1200 - ширина макета
(12 + 12 * 0.7) - прибавить ещё столько же и умножить на проценты
320px - самый маленький рахмр экрана (айфон 5)

Вариант 2

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

For example, if we want the our font-size in a range where 14px is the minimum size at the smallest viewport width of 300px and where 26px is the maximum size at the largest viewport width of 1600px, then our equation looks like this:

Например, если мы хотим, чтобы наш font-sizeнаходился в диапазоне, где 14pxминимальный размер при наименьшей ширине области просмотра составляет 300 пикселей, а где 26pxмаксимальный размер при наибольшей ширине области просмотра 1600px, то наше уравнение выглядит следующим образом:

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

We could stop there, but the one thing we have not talked about is the vertical rhythm of our text. Sure, the font-size changes with the browser, but the line-height does not. Fortunately, we can apply the same equation to the line-height property to accomplish that goal:

Мы могли бы остановиться на этом, но единственное, о чем мы не говорили, это вертикальный ритм нашего текста. Конечно, font-sizeизменения в браузере, но line-heightэто не так. К счастью, мы можем применить то же уравнение к line-heightсвойству для достижения этой цели:

body {
  font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

Источник

Articoli correlati