Приклад використання функції 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 поки не підтримує цю функцію.
Останні пости
Як вибрати ідеальний ноутбук: Повний гайд
Вибір ноутбука може бути складним завданням у світі, де ринок переповнений варіантами на будь-який смак… Читати далі
Томас Едісон
Наш великий недолік в тому, що ми занадто швидко опускаємо руки. Найбільш діючий метод досягти… Читати далі
Найкрасивіші та найбільш вражаючі мости з усього світу (ТОП-10)
Міст — це щось більше, ніж просто споруда, яка поєднує два береги. Для того, щоб… Читати далі
Соломон
Життя нас вчить, що свою пару ми пізнаємо, коли розлучаємося, своїх братів ми пізнаємо, коли… Читати далі
Річард Бах
Жодне бажання не дається тобі окремо від сили, що дозволяє його здійснити. Хоча, можливо, для… Читати далі