CSS отзывчивый размер шрифта для объяснения расчета различных областей просмотра

Question

Я прочитал эту статью . В конце этой статьи font-size: calc(0.875em + 0.25 * (100vw - 80em) / 40); будет работать в любом окне просмотра. Мы можем использовать этот метод cal c для адаптивных размеров шрифта для разных областей просмотра. Я согласен, что это работает. Но я не понимаю, из каких значений они получили 0,875em , 0,25 , 80em & 40 . Может кто-нибудь объяснить, с какого числа они получили эти значения ??

html {
  font-size: calc(0.875em + 0.25 * (100vw - 80em) / 40);
}

Answer 1

Если вы проигнорируете все единицы, результат этого математического уравнения будет равен 1.

Теперь em является масштабируемой единицей . Например, если ваш h1 равен 36pt, 1em будет 36pt, а 2em будет 72pt.

Уловка здесь 100vw, равная ширине области просмотра , и она работает на Изменение размера окна.

Таким образом, вы будете масштабировать размер шрифта в соответствии с шириной окна браузера без использования медиазапросов.

Причина чисел 0,875em, 0,25 , 80em & 40, чтобы убедиться, что у вас есть действительное свойство CSS и в результате вы получите 1.

Наличие font-size: calc(1.125em * (100vw - 80em) / 40); недопустимо.