Rems заменяют ems в CSS?

Question

Я читал о rem единицах в CSS3 , и был немного смущен.Если вы используете rem, вы все еще используете em или это заменяет его?

Например:

.selector {
    margin-bottom:24px;
    margin-bottom:2.4rem;
    font-size:16px;
    font-size:1.6rem;
}

или

.selector {
    margin-bottom:24px;
    margin-bottom:2.4em;
    margin-bottom:2.4rem;
}

Просто пытаетесьвыяснить, занимает ли rem место em, или это просто другая единица.

Answer 1

Rem - это размер em для корневого (html) элемента.Это означает, что после определения размера шрифта html-элемента вы можете определить все единицы rem, относящиеся к этому.

Например:

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

Rem поддерживается в Safari 5, Chrome, Firefox3.6+ и даже Internet Explorer, но для старых браузеров вам все равно придется использовать em, процент или px.

Answer 2

Нет, это другое подразделение. em основан на размере шрифта родителя, в то время как rem основан на корневом размере шрифта, который, я полагаю, является размером шрифта элемента html.

Answer 3

Рем - это просто еще одна единица, она не заменяет их, как они не заменяют пиксель.

Answer 4

Старая тема, но я думаю, что нужна дополнительная ясность.

И em, и rem являются относительными единицами, но rem означает всегда относительно размера шрифта html («корневой» элемент), а не унаследованного размера шрифта.

Никогда не используйте px или pt в этом отношении на экране. Путем жесткого кодирования размера шрифта вы игнорируете персональные предпочтительные настройки шрифта пользователя и делаете масштабирование менее удобным.

И em, и rem играют полезную роль. Ни один не идеален на все случаи жизни. Вот несколько примеров:

Используйте rem, чтобы избежать смешивания размеров:

ul#something li { font-size: 1.2rem; }
    … or …
ul#something li { font-size: 1.2rem; }

Первый приведет к тому, что вложенные списки будут постепенно увеличиваться на размера , поскольку модуль em будет наследоваться от родительского элемента li.

Используйте rem для установки размеров независимо :

article { font-size: .8rem; }       /* article base font size */
article>h2 { font-size: 2rem; }     /* … except for h2 */

И, конечно, вы можете использовать оба:

div#something { font-size: 1.2rem; }        /*  based on html size */
div#something>h2 { font-size: 2em; }        /*  based on div#something */

Два года спустя, и мы можем использовать его, не обращая внимания на устаревшие браузеры.