Юрий Матюхин

Еще одна статья про REM vs EM

 

Навозившись в текущем проекте с подсчетами 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 в своих проектах?

Read more!