По какому принципу рассчитывается значение в vw?

Question

[syncher]

На этом сайте https://evilmartians.com/ используется адаптивное значение шрифта и вообще для большинства селекторов, padding и тд. Например, для html значение font-size 1.6666666666666667vw/1.2

По какому принципу производится калькуляция? Это же вряд ли делается вручную? Есть ли какие-то скрипты/модули для этого?

Вообщем, как грамотно перейти на адаптивные значения с px, em и тд?

Answer 1

[Александр]

vw - viewport width
Я из своего опыта расчитываю шрифт так:
Берем нужный размер шрифта в пикселях и делим на 16

Comments

[syncher]

Хм, ну вот я сделал пробу, рассчитал по вашей формуле - codepen.io/dhatt/pen/RobNyY

Что-то не то...

[Александр]

syncher: не вычитайте 1)

[Александр]

syncher: В зависимости от используемого шрифта все-равно придется подгонять "на глаз".

[syncher]

Александр: ок, если не вычитать, то сойдет. А откуда цифра 16? По какому принципу происходит деление?

[Александр]

syncher: Принято считать что размер шрифта по умолчанию равен 16 пикселям или 1 em. Отсюда и число 16.

Если вы используете SASS, SCSS, LESS и тд, то можно делить автоматически, вот так:

font-size: (45vw/16);

это будет соответствовать, что если бы вы поделили 45px на 16px и получите размер в vw

[Александр]

syncher: Почитайте книгу Итана Маркотта - "Отзывчивый веб-дизайн". Там рассказывается как высчитывать размеры шрифтов.

[syncher]

Александр: спасибо, почитаю. Правда книга 2012 года.