Используем REM без проблем

На первый взгляд REM — не самая удобная величина. По крайней мере, точно не самая наглядная. Например, если в качестве базового размера шрифта используются стандартные 16px, то 14px в rem единицах будут равны 0.875rem, a 11px — 0.6875rem. Такое не запомнишь без фотографической памяти для всех возможных комбинаций. Те, кто осваивает REM решает эту проблему по-разному: кто-то пишет комментарии-пояснения, кто-то повсеместно использует REM калькуляторы. Но есть другой вариант сделать REM понятным для всех, раз и навсегда.

Самый простой способ сделать REM понятным — установить размер базового шрифта равным 62.5%:

html {
  font-size: 62.5%;
}

Как это работает?

Это свойство поменяет базовый размер шрифта страницы с дефолтных 16px на 10px. После этого REM единицы будут высчитываться именно исходя из этого числа, то есть 1 rem станет равным 10px. После ничего вычислять не надо и про REM калькуляторы можно забыть. 11px будут равны 1.1rem, 16px — 1.6rem, 39px — 3.9rem. Смысл понятен, дальше сами.

Если вы некромант поддерживаете старые браузеры (IE6-8), не забудьте во всех последующих CSS свойствах указывать перед относительными REM величинами, привычные абсолютные значения в пикселях. Обратите внимание на то, что порядок перечисления свойств важен. Старый браузер сначала применит верхнее свойство, а второе (незнакомое) проигнорирует.

.example {
  font-size: 16px;
  font-size: 1rem;
}

Подводные камни?

Незначительные. IE 9-10 не поддерживает REM, если оно используется в свойстве font. Для совместимости нужно использовать именно font-size, как в примере выше. В остальном, все современные браузеры отрабатывают такой приём относительно корректно. Дополнительную информацию о поддержке этого свойства браузерами можно посмотреть на http://caniuse.com/#search=rem