Добрый день, уважаемые читатели!
Т.к. разработчики в основном используют пиксельные значения, я думаю, что многие их них до конца не понимают, что такое em и как оно работает в CSS. Я надеюсь, что данная статья послужит хорошим помощником для понимания работы emзначений.
em — определение, пожалуйста
Для em есть очень простое объяснение: Равно вычисленному значению «font-size» элемента, на котором оно используется. Другими словами, если у вас есть следующий CSSкод:
.element {
font-size: 20px;
}
То это означает, что 1em определенный на элементе или на каком-либо дочернем элементе будет равен 20px.Если вы сделаете вот так:
.element {
font-size: 20px;
width: 4em;
height: 4em;
}
То это будет означать, что width и height элемента (определенные, как 4em 4em) будут равны 80px и 80px (20px * 4 = 80px).
Подробней
Wikipedia говорит:
Em – это единица изменения, равная текущему указанному размеру шрифта. Название em связано с буквой «M». Изначально данная единица была получена из ширины заглавной буквы «М» при использовании определенного шрифта.
Хотя название изначально и было основано на ширине буквы М, сейчас это уже не имеет значения, так как на сегодня единица измерения em связана с точечным размером шрифта.
CSS-файле не бывает точного определения тому, что такое em. Значение данной единицы зависит от ваших каскадных таблиц стилей. Теоретически, если вы указали значение длины всех элементов на странице в единице измерения em, то изменения одного лишь размера шрифта может разрушить всю вашу разметку.
А что, если «font-size» не используется?
В примере выше я определял свойство font-size. Em далее получается из базового значения. Но что, если у элемента не определен параметр font-size?
В этом случае, так как значение font-size наследуется по всему дереву документа, значение em будет равно унаследованному значению font-size. Если нигде не было определено свойство font-size, то значение единичного em будет равно 16px, которое является значением по умолчанию (и я надеюсь, что оно одинаково во всех браузерах).
«rem» должен быть автоматическим для людей
Пришло время показать новое добавление в CSS3: единицу rem. Данная единица rem (название от «root em») поддерживается во всех современных браузерах: IE9+, FF3.6+, Chrome, Safari 5+ и Opera 11.6+.
В целом, rem единица очень проста для понимания. Она дает вам возможность сделать так, чтобы значения единиц em во всем HTML-документе были основаны на одном главном значении, указанном в <html>-элементе. Таким образом, вы можете забыть про параметр font-size, так как все em-единицы, использованные в документе, будут основаны на главном значении rem.
И в случае, если вы не указали font-size для <html>, то по умолчанию root em будет равно 16px.
Carpe di-em
Проработав в web-дизайне и разработке много лет, мы, наконец, можем отказаться от фиксированной ширины и пикселозависимого дизайна. Хотя многие уже перешли на разработку адаптивных дизайнов, все время от времени используют пиксельные значения. Хотя этого может быть достаточно для элементов шаблона, мне кажется, что именно типографику стоит полностью переводить на значения em.
Несмотря на то, что мы можем создать целый шаблон с использованием единиц em, мне кажется, что в адаптивных шаблонах все равно лучше использовать пиксельные значения и процентное соотношение и, как уже было отмечено, для типографики использовать em.
Так что, если вы похожи на меня, выделите день — и начните использовать супер интуитивные EM и REM значения везде, где это практично и разумно.
Интересный перевод значений пикселей в em: http://www.jan-quickels.de/tools-web-typography/
Спасибо за внимание! Подписываемся на рассылку, ставим лайки, до следующей статьи 😉
