Величина «rem» вместо пикселей — что это такое?

Question

[Lici]

Почему сейчас стало модно вместо пикселей использовать величину «rem» и в чем ее преимущества?

Пример:

margin: 0px 20px 0px 20px;
margin: 0 2.857142857rem 0 2.857142857rem;

Answer 1

[asd111]

Ваш пример по идее должен выглядеть примерно так:

html {
font-size: 1px;
}

.element{
margin: 0px 20px 0px 20px;
margin: 0 20rem 0 20rem;
}

таким образом мы сможем все перевести в rem без сложных расчетов

Comments

[Хуршед Нурматов]

К сожалению, в Chrome - это вызовет некорректное отображение. Движок Chromium не позволяет отображать шрифт меньше 6px (причем в настройках можно увеличивать минимальный размер шрифта). Соответственно, всё у вас будет отображаться не как положено, а в 6 раз больше. Рецепт исправления - font-size у html сделать 10px, тогда вместо 20px надо будет писать 2rem.

Answer 2

[SleepingLion]

rem — размер относительно базового (определённого в .html{}) размера шрифта.
По идее должен быть дружелюбнее к мобильным устройствами и ресайзу.
Может быть удобно использовать rem при построении сложных по дизайну страниц, чтобы ничего не ползло при разных разрешениях/масштабах. Главное не запутаться, где ты используешь абсолютные, а где относительные значения величины.
Совместимость с браузерами

Answer 3

[Антон Фроловский]

Вот тут про нее немного написано web-standards.ru/articles/boring-bits-of-css
:) и вообще статья полезная

Answer 4

[brevis]

css-tricks.com/the-lengths-of-css/