Від автора: сьогодні ми розглянемо, як і для чого можна використовувати селектор 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 таким чином дає найбільш зручні рішення.
