Приклад використання функції 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 поки не підтримує цю функцію.
Останні пости
Демокріт
Ми потребуємо не стільки допомоги друзів, а більше тієї впевненості, що ми її отримаємо Демокріт… Читати далі
Майк Тайсон
Коли мені важко, я завжди нагадую собі про те, що якщо я здамся — краще… Читати далі
25 корисних порад та рішень jQuery, які ви повинні знати
jQuery – це швидка і досить невелика бібліотека JavaScript. Вона спрощує створення інтерактивних та приголомшливих… Читати далі
Йоганн Вольфганг фон Гете
Кожен чує тільки те, що він розуміє Йоганн Вольфганг фон Гете Читати далі
Сайт для перукарні Teti Bond
Опис проекту: Розробка офіційного сайту для перукарні Teti Bond в місті Житомир. Перукарня орієнтована… Читати далі
Як повністю і без сліду видалити плагін у WordPress
Плагіни є невід'ємною частиною функціонування WordPress, адже за їх допомогою можна досягти практично необмеженої розширюваності… Читати далі