Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 28.03.2024)
439970
солдат
347
самолетов
325
вертолетов
6914
танков
13237
ББМ
10963
артиллерия
729
ПВО
1021
РСЗО
14595
машин
26
корабли и катера
Пример использования функции calc() для изменения размера шрифта в CSS
Опубликовано

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

 

 

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *