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