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

Порівняння цін із конкурентами: навіщо це потрібно інтернет-магазину

Зміст статті Вступ: чому ціни вирішують все Що означає порівняння цін із конкурентами 5 причин,…

4 дні ago

Найкращі сауни Києва: перевірені адреси та актуальні ціни

Останніми роками інтерес до саун у Києві помітно зріс. Це пов'язано не лише з модою…

5 днів ago

Швидкий гід по лазнях та саунах Києва

У сучасному ритмі мегаполісу відпочинок став невід'ємною частиною турботи про здоров'я та емоційний стан. Особливо…

6 днів ago

Рекламний акаунт Facebook: Як отримати максимум від реклами

У сучасному світі цифрового маркетингу Facebook (Meta) залишається однією з найпотужніших платформ для просування бізнесу.…

1 тиждень ago

Тактичний тепловізор: призначення, особливості та переваги

Цей прилад став незамінним елементом арсеналу представників безлічі професій, але особливо актуальним серед військових. Тепловізор…

2 тижні ago

Як книги для саморозвитку допомагають “закрити зайві думки” і почати жити тут і зараз

Постійний потік новин, робочих завдань і особистих турбот часто призводить до того, що в голові…

2 тижні ago