Від автора: у Richard Rutter є досить цікаве керівництво по налаштуванню font-size: він стверджує, що необхідно використовувати як rem, так і em одиниці виміру залежно від відносин елементів на сторінці.
«Візьмемо в якості прикладу помітну цитату, що складається з двох параграфів. Відстань між параграфами буде залежати від розміру самих параграфів, тобто це відстань цілком можна задати через rem чи em. Якщо в процесі проектування ви вирішили збільшити розмір цитати, то й відстань між параграфами має бути збільшено. Тобто відстань між параграфами безпосередньо залежить від розміру тексту самих параграфів, і, отже, вважається локальним всередині компонента. Отже, в даному випадку необхідно використовувати em.»
Даний підхід доповнює описаний кілька років тому Крісом метод:
«Моя ідея в наступному: на рівні документа зберігається запис розмірів в пікселях px, тому ви можете легко і ефективно змінювати розміри. Але тоді всім модулям на сторінці font-size повинен бути в rem. Текстові елементи (h1, h2, p, li тощо) задаються в em (якщо ви взагалі ставите їм розмір), а, отже, вони відносяться до модулю.»
Розберемо, що сказано вище: спочатку ми поставили font-size елементів документа у пікселях:
html {
font-size: 16px;
@media screen and (min-width: 900px) {
font-size: 18px;
}
@media screen and (min-width: 1200 px) {
font-size: 20px;
}
}
Потім ми стилізуємо всі текстові елементи, такі як абзаци, заголовки та цитати, з допомогою em, так як вони ставляться до інших елементів:
h2 {
font-size: 2em;
}
pre {
font-size: 0.8 em;
}
І в кінці ми стилізуємо модулі, в яких знаходяться текстові елементи, з допомогою rem, щоб легко налаштувати всі текстові елементи всередині них:
.module {
font-size: 1.1 rem;
}
.another-module {
font-size: 1.3 rem;
}
… на практиці ми отримуємо щось на зразок цього:
Що це нам дає? Чому не використовувати лише rem чи em, щоб не ускладнювати процес? У цьому методі всі модулі стають незалежними, що в майбутньому полегшить їх стилізацію. Також ми можемо швидко задати font-size будь-якого модуля без зміни величезних частин коду. Якщо ми захочемо збільшити font-size для всього сайту, нам потрібно буде змінити лише одне значення.
Одиниці виміру em і rem використовуються для досягнення різних цілей. Якщо використовувати їх за призначенням, проект стане трохи більш гнучким, і з ним буде легше працювати.
