Главная » Полезные статьи » HTML-верстка » Знакомство с CSS-единицами em
Распечатать статью

Знакомство с CSS-единицами em

Из-за привычки разрабочиков полагаться на пиксели, мне кажется многие из нас могут не в полной мере понимать что такое em-единицы и как они работают в CSS.

Как и в случае многих моих статей, возможно я и сам узнаю что-то новенькое в процессе написания этого текста. Надеюсь, и вы узнаете из данной статьи что такое em-единицы, с чем их едят и как их можно иcпользовать при верстке.

Кх-EM… определение, пожалуйста

В спецификации дано очень простое определение единице em:

Равна значению свойства font-size, вычисленному для элемента, к которому она применяется.

Другими словами, если у вас есть такой код CSS:

.element {
        font-size: 20px;
}

тогда 1em, назначенное указанному элементу или какому-либо из дочерих элементов будет равен 20px. Вот доказательство.

Поэтому, если написать код вида:

.element {
        font-size: 20px;
        width: 4em;
        height: 4em;
}

то ширина и высота элемента (заданные как 4em и 4em) будут вычислены как 80px и 80px (20px * 4 = 80px).

Обратите внЕМание

Принцип запоминания заключен в сути em-единицы и истории ее появления. Согласно статьи из Википедии:

Em — единица измерения в типографике, равная текущему размеру шрифта. Навание em (эм) связано с буквой М. изначано данная единица была равной ширине заглавной буквы М данной гарнитуры.

Далее в статье объясняется, что хотя изначально em-единица основывалась на ширине буквы «M», это более не является истиной, и теперь em-единица относится к размеру шрифта в поинтах.

В связи с таким способом вычисления, в CSS файле нет строгого определения em-единицы; всё зависит от того, что еще происходит в таблице стилей. Поэтому теоретически, если вы объявите все размерные величины через em, изменение хотя бы одного размеры шрифта может нарушить всю разметку.

А что, если мы не указываEM font-size?

В приведенном выше примере и в JSBin, на который я ссылался, явным образон задано значение font-size. Следовательно, em-единица вычисляется из этого базового значения. Но что если для элемента не задан размер шрифта?

В этом случае, поскольку свойство font-size наследует значение по дереву документа, значение em-единицы может быть вычислено из любого элемента, от которого оно может быть унаследовано. Если в документе вообще не указан размер шрифта, тогда одна em-единицы равна 16px — значению по умолчанию (я полагаю, это во всех браузерах работает одинаково).

«rem» должен быть доступен всем

Настал подходящий момент для рассказа о новинке CSS3 rem-единице. Rem-единица (или «root em» — корневая em-единица) хорошо подерживается браузерами: IE9+, FF 3.6+, Chrome, Safari 5+ и Opera 11.6+.

Насколько я понимаю, rem-единица довольно проста. Она позволяет основывать em-единицы на «корневой» единице, заданной в элементе <html>. Таким образом вы можете совершенно свободно задавать параметры font-size в любом месте таблицы стилей – все задаваемые em-единицы будут вычисляться на сонове корневой em-единицы из корневого элемента (<html>).

И так же, как в случае с em: если вы не задали значени font-size для элемента <html>, тогда корневая em-единица будет равна 16px по уполчанию.

Не тормозим, применяЕМ

Надоели эти приколы? Очень жаль :)

Проработав веб-дизайнером и разработчиком почти 12 лет, я не сразу освободился от верстки, основанной на фиксированной ширине и пиксельных размерах. Хотя я уже некоторе время занимаюсь адаптивной версткой, я все еще задаю размеры в пикселях. Их можно прекрасно использовать для элементов макета, но с точки зрения типографики em-единицы — самое то.

Вполне возможно полностью верстать, используя только em-единицы, но я думаю, что для адаптивной верстки лучше использовать пиксели и проценты, а em-единиц оставить для типографики.

Так что если вы такой же, как и я, — начните прямо сегодня использовать супер-интуитивные em— и rem-единицы везде, где это практично и разумно.

Не можем побороть — присоединяЕМся

Ах да, захотите оставить комментарий к данной статье — с вас каламбуры с использованием «em».

Источник:  css-live.ru
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи