Навозившись в текущем проекте с подсчетами EM-ов я решил поискать альтернативу этому способу. Конечно я знал что существуют REM-ы и думал что их все-еще нельзя использовать, но я был не прав.
В этой статье я расскажу в чем различия между REM и EM, и как начать использовать REM в своих проектах уже сейчас.
Как работает EM?
Em (как и %) работает путем расчета текущего размера шрифта в зависимости от размера шрифта родительского элемента. К примеру:
html {
font-size: 100% /* =16px */
}
body {
font-size: 2em; /* =32px */
}
p {
font-size: 1em; /* =32px */
/* font-size: 0.5em; =16px */
}
Для простоты понимания, я всегда представляю EM в процентах, к примеру у нас html — 100% или 1em, body — 2em или 200% от html, P — 1em или 100% от body.
Как работает REM?
Em (как и %) работает путем расчета текущего размера шрифта в зависимости от размера шрифта html. К примеру:
html {
font-size: 100% /* =16px */
}
body {
font-size: 2rem; /* =32px */
}
p {
font-size: 1rem; /* =16px */
}
Таким образом контролировать размеры элементов стало гораздо проще.
Зачем использовать REM или EM?
Основная идея использования относительных размеров шрифтов в том, что в дальнейшем вы можем изменить размер шрифта у html и все элементы на сайте у которых размеры указаны в em или % изменят свои размеры. Но при использовании em и % нам нужно все время пересчитывать их самостоятельно.
К примеру чтобы добиться у P размера шрифта в 16px нужно задать ему font-size: 0.5em или font-size: 50%, что весьма неудобно.
А в случае с REM достаточно просто указать font-size: 1rem и все будет так, как мы ожидаем.
Альтернативный (удобный) метод использования REM
Этот метод такой-же как и использовался раньше для EM, но он гораздо лучше проявил себя именно в сочетании с REM.
html {
/* устанавливаем базовый размер шрифта в 10px для простоты расчетов */
font-size: 62.5%;
}
body {
/* устанавливаем размер шрифта для текста по умолчанию */
font-size: 1.6rem; /* 16px */
}
h1 {
font-size: 3.2rem; /* 32px */
}
Теперь нам не нужно считать REM от 16px. Мы считаем их от 10px, что гораздо проще.
Использование в продакшене
С поддержкой у REM все не так уж плохо. По данным caniuse их поддерживают все популярные браузеры. Есть одна поправка, касающаяся Internet Explorer 9-10 — они не поддерживают свойство REM если написать его в свойстве font и проигнорируют все свойство. Но можно написать через font-size (ох уж этот IE).
Что делать тем, кто не поддерживает REM? На этот случай у нас в запасе есть отличное JavaScript решение этой проблемы — Rem-unit-polyfill. Прочитать подробнее о ней можно на странице проекта, но вкратце подключаем этот файл к нам на страницу, и REM работают везде. Я пока еще не тестировал эту библиотеку, но у неё сейчас 454 звезды и 125 форков, поэтому я склонен доверять ей. Как только я проверю её, я обновлю этот пост.
А уже используете REM в своих проектах?
