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

 

 

This post was last modified on 14/06/2019 17:26

Останні пости

Фрідріх Ніцше

Якщо ви вирішили діяти — закрийте двері для сумнівів Фрідріх Ніцше  

26/05/2024

Стівен Кінг

Будь-яка проблема в житті — це перевірка наших можливостей Стівен Кінг  

21/05/2024

Вінстон Черчилль

Песиміст бачить труднощі у кожній можливості; оптиміст у будь-яких труднощах бачить можливості Сер Вінстон Леонард…

19/05/2024

Конфуцій

Коли вам здасться, що мета недосяжна, не змінюйте ціль — змінюйте свій план дій Конфуцій…

12/05/2024

Чарльз Дарвін

Виживає не найсильніший і не найрозумніший, а той, хто найкраще пристосовується до змін Чарльз Роберт…

11/05/2024

Що таке тег canvas в HTML5 і для чого він потрібен?

Елемент <canvas> з’явився лише в HTML5 і використовується для динамічного малювання графіки на веб-сторінці з…

10/05/2024