Чем отличаются px от em

px_vs_emДля задания размеров различных элементов, в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера. 

В этой статье я хочу попытаться разобраться чем же отличаются px от em. Итак.

px (пиксели)

Это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px. Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px, его нужно разделить на три части – волей-неволей появляются 33.333...px. При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

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

Достоинства

Главное достоинство пикселя – чёткость и понятность

Недостатки

Проблема использования пикселей заключается в том, что IE считает пиксели абсолютным значением и не масштабирует текст, с размером шрифта, указанным в пикселях. Поэтому принято использовать em. Задание размеров блоков в em позволяет создавать масштабируемый дизайн, изменяющийся в зависимости от размера шрифта.

Принято использовать для задания размеров блоков.

em (вычисляемая единица)

Значения указанные в em, ведут отсчет от базового размера шрифта браузера (16px), т.е. по умолчанию 1em=16px. Для удобства использования em, базовый размер шрифта сначала сбрасывают до 10px, когда 1em=10px, а 0,1em=1px. Для сброса базового размера шрифта используйте следующее правило:

И учитывайте, если для какого-то блока будет указан размер шрифта, например, 1.6em, то все его потомки за базовое значение будут брать уже не 10px, а 16px(1.6em). Для удобства расчета значений размера шрифтов в em’ах можно использовать вот этот сервис.

Принято использовать для задания размеров текста и/или блоков.

Достоинства

  • Очень удобно и быстро меняются размеры всего.Если мы меняем значение элемента то каскадно поменяются все дочерние элементы.
  • Если нужно, то дочерние элементы можно переопределить как обычно, в пикселях.
  • Это очень удобно для изменения размера программно. Например, пользователь может изменить их в настройках.
  • Очень удобно, и сохраняется качество шрифта при масштабировании размеров страницы.
  • Случается так, что пользователи переопределят размер шрифты через браузер. Использование em.
    позволяет посетителю видеть и использовать масштабируемый текст при любом разрешении и на любом устройстве.

Недостатки

  • Браузеры округлят не целое значение размера , что не сказывается при больших размерах, но на маленьких деталях можно увидеть неточность.
  • В случае наследование значения em тоже наследуется, это может принести не мало хлопот.
  • Конфликтует с препроцессорами(То есть,после компиляции не получиться динамически поменять значениеem ).
  • При использовании transform: scale() элементы перекрывают друг друга.

Таблица соотношений px, pt, em %

Пункт, pt Пиксель, px Единица, em Процент,%
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *