Раніше ми робили короткий огляд функції 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%.
-webkit-calc()
.-moz-calc()
.-webkit-calc()
.
Консоль браузера (також відома як консоль JavaScript або веб-консоль), — це потужний інструмент для розробників,…
Ніколи не вказуйте на помилки, якщо не знаєте, як їх виправити Джордж Бернард Шоу
Коли необхідно зробити вибір, а ви його не робите, — це теж вибір Вільям Джеймс…
Коли ви ставите перед собою цілі, дуже важливо бути максимально конкретним. Тут не допоможе проста…
Сучасна людина думає, що втрачає час, коли не діє швидко, однак не знає, що робити…
Унікальна елегантність і довговічність: чому варто купити травертин або граніт Натуральний камінь це більше, ніж…