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

SEO просування сайту: Як вивести ваш бізнес в ТОП Google з Digital агентством

Ви добре попрацювали на створенням сучасного сайту, впровадили якісний продукт і впевнені у своїй перевазі…

11 години ago

SQL-ін’єкції: теоретична частина необхідних знань

Захист сайту від хакерів, ботів та онлайн-вразливостей – це багатогранна та кропітка робота. А серед…

4 дні ago

Надоїдлива помилка _load_textdomain_just_in_time у WordPress

Сьогодні розглянемо практичний кейс по боротьбі з надоїдливою помилкою, з якою часто стикаються програмісти WordPress…

5 днів ago

Харукі Муракамі

Якщо є гідна мета, то вона спрощує наше існування Харукі Муракамі  

6 днів ago

Допомога при виборі та купівлі електрогенератора в Україні

В сучасному світі, в якому стабільність електропостачання є ключовим фактором комфорту та безперебійної роботи, наявність…

1 тиждень ago

Воррен Баффет

Навіть якщо ви дуже талановиті і докладаєте великих зусиль, для деяких результатів просто потрібен час:…

2 тижні ago