Пример использования функции 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 пока не поддерживает эту функцию.
Последние посты
Самые красивые и впечатляющие мосты со всего мира (ТОП-10)
Мост — это нечто большее, чем просто сооружение, соединяющее два берега. Для того, чтобы появился… Читать далее
Соломон
Жизнь нас учит, что свою пару мы познаем, когда разводимся, своих братьев мы познаем, когда… Читать далее
Чак Паланик
Кто может — тот делает. Кто не может — тот критикует Чак Паланик Читать далее
Ричард Бах
Ни одно желание не дается тебе отдельно от силы, позволяющей его осуществить. Хотя, возможно, для… Читать далее
Стивен Кинг
Жизнь – это непрерывный опыт, и даже самые плохие моменты занимают свое место в пазле… Читать далее
неизвестный автор
Люди, которые любят одиночество, дорого заплатили за дружбу с кем-то... неизвестный автор Читать далее