Раніше ми робили короткий огляд функції 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 поки не підтримує цю функцію.
