Являются ли 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 */
Через два года по треку, и мы можем использовать его, безопасно игнорируя старые браузеры.