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

 

 

Recent Posts

Мать Тереза

Если молитва – это твое обращение к Богу, то интуиция – это разговор Бога с… Read More

17/02/2021

Особенности маркировки косметики

Косметическая продукция – товары, принадлежащие к особой категории. Упаковка должна соответствовать ряду требований. Важно, чтобы… Read More

16/02/2021

Основные компоненты системы раздвижных дверей (купе)

Раздвижные двери купе – это стильный и современный способ добавить индивидуальности вашему дому. Они не… Read More

12/02/2021

Удивительные места Украины для отдыха душой и телом

Украину можно смело назвать не только одной из самых старейших стран в Европе, но и… Read More

05/02/2021

Улучшаем показатели Core Web Vitals – основной тренд SEO в 2021 году

Ранее мы писали о том, что такое Основные интернет-показатели (по-английски Core Web Vitals) в инструменте… Read More

30/01/2021

Ответы на самые распространенные вопросы о жестких дисках для ноутбуков

Не все жесткие диски одинаковы, и когда вы покупаете новый ноутбук, на выбор у вас… Read More

29/01/2021