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

Сравнение цен с конкурентами: зачем это нужно интернет-магазину

Содержание статьи Введение: почему цены решают все Что значит сравнение цен с конкурентами 5 причин,…

4 дня ago

Лучшие сауны Киева: проверенные адреса и актуальные цены

В последние годы интерес к саунам в Киеве заметно вырос. Это связано не только с…

5 дней ago

BaniSauny: быстрый гид по баням и саунам Киева

В современном ритме мегаполиса отдых стал неотъемлемой частью заботы о здоровье и эмоциональном состоянии. Особенно…

6 дней ago

Рекламный аккаунт Facebook: Как получить максимум от рекламы с Tech4You

В современном мире цифрового маркетинга Facebook (Meta) остается одной из самых мощных платформ для продвижения…

7 дней ago

Тактический тепловизор: назначение, особенности и преимущества

Этот прибор стал незаменимым элементом арсенала представителей множества профессий, но особенно актуален среди военных. Тепловизор…

2 недели ago

Как книги для саморазвития помогают «закрыть лишние мысли» и начать жить здесь и сейчас

Постоянный поток новостей, рабочих задач и личных забот часто приводит к тому, что в голове…

2 недели ago