Почему получаются неодинаковые rem-ы при адаптиве текста и интерльиньяжа?

Question

[volshebnik69]

Не подскажете что не так ?

Пишу

font-size:calc((100vw - 30rem)/(80 - 30) * (1.18 - 1.07) + 1.07rem);
 line-height:calc((100vw - 30rem)/(80 - 30) * (1.6 - 1.2) + 1.2rem);

Но на экране монитора получается, что 1 rem для высоты шрифта = 16, 667 px.
А для межстрочного расстояния 1 rem = 19,19 px.
Разве ремы не одинаковы ?
Размеры проверяю расширением Хрома — Fonts Ninja (см. рисунок)


И получается, что нужно всё время залазить в инспектор в адаптив и смотреть расширением Fonts Ninja, сколько выходит размер шрифта или межстрочного расстояния, чтобы в коде точно написать нужную их величину числом рема.

Например, если хочу установить нужный мне интерлиньяж, к примеру, 30 px., то делю 30 на 16 и получаю 1,875 rem. Но при прописании в формуле этой величины не получается 30 px. на мониторе. Путём подбора получается 1.6 rem (=30 px. 1 rem = 19,19 px.)

Если дальше ставить такое соотношение для размера шрифта, то снова размер шрифта не получается. Снова путём подбора находится величина 1 rem = 16, 667 px. (уже для шрифта. И вот она уже другая).
Это что, так и нужно прыгать туда-сюда с инспектора в респонсиве на код и обратно ,чтобы вручную "поймать" нужные размеры ?

Comments

[volshebnik69]

Извиняюсь, вот точнее

<style>
p {
font-size:calc((100vw - 30rem)/(80 - 30) * (1.18 - 1.07) + 1.07rem);
line-height:calc((100vw - 30rem)/(80 - 30) * (1.6 - 1.2) + 1.2rem);
......................................
}

....................
</style>

Просто на CSS. Без постпроцессора, насколько я понимаю.
На других браузерах не проверял.

https://habr.com/ru/post/310186/

[volshebnik69]

Вопрос снимается. Ответ нашёл. Извините за беспокойство, спасибо )
Был неправильно прописал размеры минимальной ширины экрана мобильного и максимальной ширины монитора.
Теперь всё заработало и ремы одинаковы. 1 rem = 16 px.

Итоговые строчки кода такие:

font-size:calc((100vw - 20rem)/(120 - 20) * (1.25 - 1) + 1rem);
line-height:calc((100vw - 20rem)/(120 - 20) * (1.875 - 1.2) + 1.2rem);