Вернуться назад
Распечатать
Одиниця виміру REM в CSS - загальні відомості та способи застосування
В CSS-правила використовується два варіанти одиниць виміру: абсолютні і відносні. Спочатку була відома лише одна абсолютна одиниця виміру – піксель. Її розмір залежав від матриці або монітора, і його було легко розрахувати самостійно.
Застосування відносних одиниць вимірювання полегшило верстку, зробивши модульні елементи більш керованими. Сучасна техніка вимагає, щоб при масштабуванні елементи на сторінках змінювалися в розмірах залежно від дозволу екрану або вікна браузера користувача. Тому EM і REM в CSS стали незамінним помічником для створення сайтів, де потрібні адаптивні розмірів шрифтів. Зараз більшість браузерів не відчувають проблем при масштабуванні тексту, а їх поведінка при збільшенні або зменшенні розміру шрифту узгоджено між собою. Але будь-макет слід перевіряти в декількох браузерів, в тому числі і в застарілих, щоб зрозуміти, як буде виглядати кінцевий результат для різних користувачів.
Для того щоб отримати розмір шрифту рівний 10 пикселів, потрібно використовувати 05 EM. Такі зміни значень в різних частинах коду часто плутають початківців верстальників. Існувала також проблема з використанням EM в CSS – при встановленні розміру шрифту 0875 EM, кожен наступний вкладений елемент зменшувався. Небажані ефекти викликало використання цієї одиниці, і в margin-bottom. У цьому випадку розміри шрифти впливали на поля навколо елемента, так як в EM безпосередньо ставився до цього параметру блочної моделі.
Недоліки використання пікселів
Для верстальників, що працюють на ЗМІ, на сторінці важливо виділити саме контент. Він повинен бути зручним для читання, з оптимальною довжиною рядка і достатнього розміру, щоб навіть користувачу з низьким зором було зручно сприймати текст. Неважливо, з якого пристрою користувач читає статтю і наскільки у нього гарний зір – йому важливо зрозуміти зміст статті без спеціальних пристосувань. При використанні пікселів у верстці збільшення масштабу часто призводить до того, що кількість слів у рядку зменшується, з'являються негарні переноси тексту або ж контент зовсім випадає з контейнера. Тому веб-розробники та дизайнери почали використовувати при написанні коду відсотки і відносні одиниці виміру, такі як EM, REM. Але вони досі не змогли повністю витіснити пікселі.
Історія появи відносних одиниць
Так як спочатку сторінки в більшості браузерів не масштабувалися, пікселі довго залишалися єдиним варіантом опису розмірів шрифтів. Але з розвитком веб-технологій з'явилася необхідність у створенні нових одиниць вимірювання. Так з'явилися EM і %, а потім і REM, значення яких були прив'язані до стандартів браузера і зазвичай дорівнювали 16 пикселів. Існує емпіричне правило, об'єднує базові розміри шрифтів: 100 % = 1 em ~ 16px ~ 14pt. Це означає, що, якщо не змінити розмір шрифту у будь-яких дочірніх елементах, за замовчуванням у браузері він буде складати близько 16 пікселів і приблизно 14пт (типографського пункту), але завжди 100 % і 1 EM.
Використання відносних одиниць
Відносні одиниці вимірювання, які так поширені в типографіці і CSS, – EM і REM – поки що менш відомі пересічним користувачам, ніж пікселі. Не кожен початківець дизайнер або верстальник розуміє їхнє призначення і використовує правильно. Між професійними дизайнерами досі ведуться суперечки, коли краще використовувати ту або іншу одиницю. Тим не менш відносні одиниці значно полегшують чуйну верстку і вважаються найбільш ефективним методом при побудові модульних компонентів. EM і REM застосовуються, щоб задати розмір різним елементам – заголовкам, меж, рамок. Але їх розміри обчислюються по-різному.Що таке EM
EM – це відносна одиниця вимірювання, яка залежить від розміру шрифту батьківського елемента. Найчастіше його прописують в правилі CSS для тега body. В цьому теге задаються параметри всіх елементів на сторінці. Як розуміти одиниці EM в CSS і обчислювати їх значення? Все досить просто. Якщо font-size (тобто розмір шрифту) селектора body буде дорівнює 10 пикселів, 1 EM теж дорівнює 10 пикселів, тобто верстальник задає значення цієї одиниці самостійно. В результаті всі інші розміри, задані в EM, будуть вираховуватися виходячи з цього значення. Тексти, параметри яких задається в пікселях і в відносних одиницях, можуть не відрізнятися візуально до тих пір, поки їх не доведеться змінювати. Але вони дуже зручні при створенні гнучких модульних блоків. Якщо не задати розмір шрифту, але використовувати у коді відносні одиниці, вони будуть розраховуватися за замовчуванням, і 1 EM виявиться дорівнює 16 пикселів.
Особливості одиниці виміру EM
Існує ще одна особливість при використанні відносних одиниць вимірювання EM. Якщо у селекторі встановлений розмір шрифту рівний 2 EM, тоді при використанні EM в параметрах для іншої властивості в цьому ж селекторі величина цієї одиниці буде застосовуватися інакше. В результаті розмір елемента збільшиться вдвічі. Параметри EM розраховуються виходячи з розміру шрифту в певному блоці. Тобто, якщо font-size селектора параграфа (тег «p») дорівнює 2 EM, а для body він становить 10 пікселів, тоді при додаванні в селектор тега p розміру зовнішньої межі тексту («margin») товщиною 1 EM він буде дорівнює вже не 10 а 20 пикселів.Для того щоб отримати розмір шрифту рівний 10 пикселів, потрібно використовувати 05 EM. Такі зміни значень в різних частинах коду часто плутають початківців верстальників. Існувала також проблема з використанням EM в CSS – при встановленні розміру шрифту 0875 EM, кожен наступний вкладений елемент зменшувався. Небажані ефекти викликало використання цієї одиниці, і в margin-bottom. У цьому випадку розміри шрифти впливали на поля навколо елемента, так як в EM безпосередньо ставився до цього параметру блочної моделі.
Одиниці виміру REM в CSS
Тепер розглянемо, що таке одиниця виміру REM і як нею користуватися. Перша згадка про REM з'явилося в 2011 році в коментарі до статті німецького розробника Ґерріта ван Аакена про використання пікселів в CSS–коді. Ця відносна одиниця за значенням близька до EM, і його назва перекладається як «кореневої EM», або Root Em. Поведінка REM більш передбачувано. Застосування цієї одиниці у верстці полегшує підрахунок розмірів елементів у різних частинах коду, так як REM в CSS дорівнює значенню розміру шрифту, встановленого для кореневого елемента – тега HTML. Але частіше це значення додається також і в body, щоб виключити помилки з розрахунками. Використання REM в CSS, якщо його значення не прописано в тегу HTML, стає ще простіше. 1 REM буде дорівнювати стандартним 16 пікселям, як і у випадку з EM, значення якого не встановлено.Спори про використання REM в CSS. REM проти EM
У REM і EM є свої плюси і мінуси. Існує безліч суперечок серед верстальників, яку відносну одиницю виміру застосовувати при написанні коду. Є думка, що використання REM в CSS робить верстку менш модульної, а EM ускладнюють верстку і вимагає уважного підходу і підрахунків. Кожен верстальник в процесі роботи сам обирає для себе, яку одиницю виміру і де застосовувати. Але на початковому етапі краще все ж пікселі. EM краще для елементів, властивості яких масштабуються виходячи з font-size. В інших випадках краще підійдуть REM.
Застосування REM в заголовках
Розглянемо, як будуть змінюватися заголовки текстів (теги h1–h6), якщо їх прописати в REM. Припустимо, що у заголовку є поля навколо нього – padding, фон і зазначений розмір шрифту. Якщо потрібно буде збільшити заголовок, простір між краями елемента скоротиться, тому padding доведеться долати. Але тоді виникає проблема з тим, що всі елементи просто перестануть міститись на сторінці. Але є задати розмір шрифту в пікселях, а потім в налаштуваннях браузера спробувати його змінити на більш великий, нічого не станеться. При вживанні REM він буде збільшуватися і зменшуватися в залежності від налаштувань користувача.
Обмеження Root Em
REM допомагає створювати каскадні таблиці з різним font-size для заголовків і абзаців. Він значно спрощує верстку, так як не потрібно змінювати код повністю – достатньо поправити розмір шрифту в тегу html. Існує також обмеження в використанні цієї одиниці. В старих версіях браузерів Opera і IE і в деяких браузерах для Android вони досі не підтримуються. Тому розробники змушені використовувати пікселі в якості запасного варіанту і писати подвійний код. Сучасні браузери будуть зчитувати рядка з розміром шрифту в пікселях і переводити їх в REM, а застарілі просто не побачать код з невідомою їм одиницею виміру. Але якщо забути про це і почати розробляти сайт під якийсь певний екран, тоді можна втратити безліч користувачів, які просто не зможуть сприйняти контент, зламався через використання REM чи EM.