Пример использования функции 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 пока не поддерживает эту функцию.

 

 

Share

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

Какой подарок можно вручить отцу ко Дню защитника Украины?

У каждой украинской семьи есть свои традиции и любимые праздники, особенно все мы любим поздравлять… Читать далее

19/08/2022

Демокрит

Мы не столько нуждаемся в помощи друзей, сколько в уверенности, что мы ее получим Демокрит… Читать далее

21/02/2022

Майк Тайсон

Когда мне тяжело, я всегда напоминаю себе о том, что если я сдамся — лучше… Читать далее

12/02/2022

25 полезных советов и решений jQuery, которые вы должны знать

jQuery — это быстрая и довольно таки небольшая библиотека JavaScript. Она упрощает создание интерактивных и… Читать далее

09/02/2022

Иоганн Вольфганг фон Гете

Каждый слышит только то, что он понимает Иоганн Вольфганг фон Гете   Читать далее

03/02/2022

Сайт для парикмахерской Teti Bond

  Описание проекта: Разработка официального сайта для парикмахерской Teti Bond в городе Житомир. Парикмахерская ориентирована… Читать далее

29/01/2022