Что такое font-size: calc()?
font-size: calc() - это функция CSS, которая позволяет вам вычислять размер шрифта на основе математического расчета. Это особенно полезно для создания адаптивного дизайна, где размер шрифта должен меняться в зависимости от размера экрана.
Формула расчета и пример использования font-size: calc()
Сам расчет производится по данной формуле
font-size: calc((100vw - Vmin)/(Vmax - Vmin) * (Fmax - Fmin) + Fmin);
100vw - общая ширина страницы браузера.
Vmax - максимальная ширина (пример: 1920 максимум - мониторы).
Vmin - минимальная ширина (пример: 320 минимум - телефоны).
Fmax - максимальный размер шрифта (48).
Fmin - минимальный размер шрифта (26).
Рассмотрим сам пример использования:
font-size: calc((100vw - 320px)/(1920 - 320) * (48 - 26) + 26px);
Здесь размер шрифта автоматически масштабируется в зависимости от ширины вьюпорта (100vw). На экранах с шириной 1920 и больше шрифт будет иметь размер 48, на телефонах (320) и меньше размер будет 26, а в промежутке между 1920 и 320 уже происходит автоматический расчет размера. Функция calc() здесь используется для вычисления размера шрифта на основе заданного диапазона.
Заключение
Использование функции font-size: calc() в CSS, позволяет вам легко масштабировать размер шрифта на основе размера экрана пользователя, делая ваш сайт более доступным и удобным для чтения на различных устройствах. Большим плюсом является отсутствие необходимости использования @media запросов под разные размеры экранов.
