Пример использования функции calc() для изменения размера шрифта в CSS

Ранее мы делали краткий обзор функции 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 пока не поддерживает эту функцию.

 

 

Последние посты

Фридрих Ницше

Не нужно додумывать слишком много. Так вы создаете проблемы, которых изначально не было Фридрих Ницше…

11/07/2024

Такой разный инвертор! Выбираем между кондиционерами Inverter, Inverter DC и Full DC

Лето в разгаре, а значит самое время задуматься о покупке кондиционера. Но как не потеряться…

06/07/2024

Омар Хайям

Настоящий друг — это человек, который в глаза тебе выскажет все, что о тебе думает,…

30/06/2024

Полезные советы по выбору раздвижной двери

Следует знать, что функциональность и дизайн работают рука об руку, когда вы используете раздвижную дверь.…

29/06/2024

Гераклит

Единственное, что есть в нашей жизни постоянного, — это перемены. Нет ничего более постоянного, чем…

23/06/2024

Иммануил Кант

Sapere aude! Имей мужество пользоваться собственным умом! Иммануил Кант  

22/06/2024