Название

Единица измерения EM в CSS. Примеры.

Единицу измерения em можно довольно часто встретить при просмотре стилей CSS.

27-02-2014 8-52-59

Давайте сейчас разберемся, что это такое и как с этим работать.

Начнем с того, что EM - это относительная единица измерения.

Сколько пространства будет занимать размер в 1 em на экране монитора?

Ответить на этот вопрос однозначно нельзя. При разных условиях, эта размерность будет разная.

Давайте в этом сейчас убедимся:

<div style="font-size:12px;">
   <div>
       <p style="font-size:1em;">Текст</p>
   </div>
   <div style="font-size:32px;">
       <p style="font-size:1em;">Текст</p>
   </div>
</div>

В этом примере мы видим, что размер текста элемента абзаца в двух разных блоках div задан одинаковым значением 1em. Тем не менее, мы видим, что фактически размер текста в этих двух случаях значительно отличается.

Почему так происходит?

Здесь мы уже подходим к определению единицы размерности em.

EM - это размер, который формируется из размера свойства font-size родительского элемента, умноженного на коэффициент, который указывается перед ним.

<div style="font-size:12px;">
   <div style="font-size:2em;">
       <p style="font-size:1em;">Текст <span style="font-size:12px;">Текст 12px</span></p>
   </div>
</div>

Коэффициент, который указывается перед размерностью em можно изменять вплоть до тысячной части:

<div style="font-size:12px;">
   <div>
       <p style="font-size:0.752em;">Текст</p>
   </div>
</div>

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

Теперь вопрос, если у родительского элемента не задано свойство font-size?

В этом случае значение em будет расчитываться относительно первого родительского элемента, у которого это свойство задано.

Если в документе вообще нигде явно не задается свойство font-size с конкретным значением, то значение font-size задается браузером автоматически и оно будет равно 16 пикселям.

Это можно наглядно увидеть в следующем примере:

<div>
   <div>
       <p style="font-size:1em;">Текст <span style="font-size:16px;">Текст 16px</span></p>

  </div>
</div>

Зачем такие трудности, почему бы просто не использовать везде пиксели?

Дело в том, что использование единиц em дает одно главное преимущество: размеры в em очень хорошо подстраиваются под размер экрана пользователя.

Таким образом, просматривая веб-страницу на компьютере с большим монитором и на маленьком мобильном телефоне, пропорции и размеры элементов указанные в em будут везде одинаковыми.

Таким образом это один из способов, как можно адаптировать ваш сайт к мобильным устройствам.

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

02019055_cover-pdf-kniga-nina-komolova-komputernaya-verstka-i-dizayn-samouchitel    css3 cover_OUT.indd    09450331_cover-pdf-kniga-devid-soyer-makfarland-bolshaya-kniga-css3-2

Назад Далее