Я читал о 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, или если это просто другая единица.
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, процентов или пикселей.
Нет, это другое подразделение. em основан на размере шрифта родителя, а rem основан на корневом размере шрифта, который, по моему мнению, является размером шрифта элемента html.
Rem - это еще один блок, он не заменяет em, так как em не заменил пиксель.
Одинокая тема, но я думаю, что она нуждается в большей ясности.
Оба 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 */
Через два года по треку, и мы можем использовать его, безопасно игнорируя старые браузеры.