Ранее мы делали краткий обзор функции calc() в CSS. Сегодня мы хотим рассмотреть небольшой практический пример, который даст решение для плавного масштабирования размера шрифта в зависимости от размера экрана. Если ранее подобные задачи решались с помощью jQuery, то с появлением функции calc(), это можно сделать с помощью чистого CSS.
Функция calc() позволяет делать простые математические вычисления прямо в CSS. А это позволяет легче создавать адаптивные макеты сайтов. Давайте рассмотрим один небольшой практический подход, который позволит изменять размер шрифта динамически на основе размера экрана.
Задача: изменять размер шрифта динамически с помощью CSS
Допустим, у нас есть 2 разных размера экрана: до 400px (например, мобильные устройства) и до 1200px (планшеты и ноутбуки). Тогда формула функции calc() для абзацев (тег p) может выглядеть так:
p {
font-size: calc(18px + (24 - 18) * (100vw - 400px) / (1200 - 400));
}
Обратите внимание на значения размеров шрифта: 18px – размер шрифта при экранах 400px и ниже; и 24px – размер шрифта при экранах до 1200px. Значение 100vw – это практически то же, что и значение width: 100%;, т.е., при изменении размера экрана формула будет динамически пересчитана. Добавьте такое правило в свою таблицу стилей и попробуйте изменять размер экрана в браузере – вы увидите, что размер шрифта будет изменяться динамически на основании математических расчетов функции calc().
Вы также могли бы использовать для решения этой задачи медиа-запросы, например, так:
@media (max-width: 600px) {
p { font-size: 18px; }
}
@media (min-width: 1200px) {
p { font-size: 24px; }
}
Это тоже работает, но с использованием функции calc() это делается с помощью меньшего по объему кода.
Задача: изменять отступы и высоту строки (padding, line-height) динамически с помощью CSS
Работает ли функция calc() с другими свойствами? Да, работает! Правда, не для всех свойств можно использовать значения в процентах, но для таких единиц как px, em или rem все работает хорошо. Используя ту же логику calc() для значений отступов и высоты строки, вы сможете получить полностью адаптивный макет для разных размеров экрана.
Вот пример такого использования:
p {
/* line-height: 28px; */
line-height: calc(28px + (38 - 28) * (100vw - 600px) / (1200 - 600));
/* padding: 20px; */
padding: calc(20px + (40 - 20) * (100vw - 600px) / (1200 - 600));
}
Поддержка браузерами
Поддержка браузерами функции calc() очень хорошая. Если использовать префиксы браузеров (например, -moz-calc()), тогда общая поддержка будет более 95%.
- Chrome до версии 26.0 поддерживает значение
-webkit-calc(). - Firefox до версии 16.0 поддерживает значение
-moz-calc(). - Safari с версии 6.0 поддерживает значение
-webkit-calc(). - На мобильных устройствах Android только с 67+, iOS только на 6.0+, а Opera Mini пока не поддерживает эту функцию.
