Гнучка типографіка в CSS допомогою :root

20

Від автора: сьогодні ми розглянемо, як і для чого можна використовувати селектор CSS root. Одним з елементів адаптивного дизайну, з яким буває складно визначитися, це типографіка. В ідеалі вам хочеться отримати максимально відповідний шрифт для всіх областей перегляду. Зазвичай для цього потрібно почати з базового розміру шрифту, а потім змінювати його для різних контрольних точок.

p {
font-size: 1em;
}
@media screen and (max-width: 45em) {
p {
font-size: 1.25 em;
}
}

У цьому прикладі шрифт не змінюється за тих пір, поки не досягнута контрольна точка.

Використання :root

Я віддаю перевагу такий підхід до гнучкої типографіці, при якому потрібно розрахувати розмір шрифту, виходячи з висоти і ширини області перегляду з допомогою селектора :root:

:root {
font-size: calc(1vw + 1vh + .5vmin);
}

Тепер можна задіяти елемент em , заснований на значенні, подсчитанном допомогою :root:

body {
font: 1rem/1.6 sans-serif;
}

Одиниці області перегляду

Ви помітите, що функції calc() були передані значення в одиницях області перегляду. Давайте коротко розглянемо їх, щоб зрозуміти, як розраховується розмір шрифту в селекторі root.

1vw = 1% від ширини області перегляду

1vh = 1% від висоти області перегляду

1vmin = 1vw or 1vh, вибрати менше

1vmax = 1vw or 1vh, вибрати більше

Якщо ми застосуємо це до розмірів області перегляду iPhone 7 — 375×667, розраховане значення:root буде:

:root {
font-size: calc(3.75 px + 6.67 px + 1.875 px); /* 1vw + 1vh + .5min */
}

Підходи до гнучкої типографіці завжди будуть відрізнятися один від одного і нам варто оцінювати кожен підхід щодо того, для чого нам це потрібно, розглядаючи не тільки адаптивні властивості. Я дізнався, що використання :root таким чином дає найбільш зручні рішення.