Приклад використання функції 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
Останні пости
Генрі Форд
Людина має два мотиви поведінки — один справжній та інший, що гарно звучить Генрі Форд…
Фрідріх Ніцше
Не треба додумувати надто багато. Так ви створюєте проблеми, яких не існувало Фрідріх Ніцше
Такий різний інвертор! Вибираємо між кондиціонерами Inverter, Inverter DC та Full DC
Літо в розпалі, а значить якраз час задуматися про покупку кондиціонера. Але як не загубитися…
Корисні поради щодо вибору розсувних дверей
Варто знати, що функціональність і дизайн працюють рука об руку, коли ви використовуєте розсувні двері.…