Являются ли rems заменять ems в CSS?

Я читал о 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, или если это просто другая единица.

ОТВЕТЫ

Ответ 1

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

Например:

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

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

Ответ 2

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

Ответ 3

Rem - это еще один блок, он не заменяет em, так как em не заменил пиксель.

Ответ 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 */

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