1. HTML и CSS
  2. Единицы измерения

Единицы измерения

px

Пиксель задаёт точный размер элемента и размер шрифта.

Отображаемое количество пикселей на экране задаётся в настройках монитора. Т.е. если у монитора будет задан размер «1280x720», то элемент с шириной в «1280px» будет на всю ширину экрана.

Слово «px» сокращённо от «pixel».

em

Единица измерения «em» задаёт размер текста в зависимости от его текущего размера. Например, размер «2em» означает, что текущий текст надо сделать в два раза больше.

<p>Обычный текст. <span style="font-size: 2em">Текст в em</span>.</p>

Код выше покажет следующий текст.

Обычный текст. Текст в em.

Размер зависит от текущего размера шрифта. Т.е. вложенная «2em» снова увеличит текст в два раза.

<p>
  Обычный текст.
  <span style="font-size: 1.5em">
    Текст в <span style="font-size: 1.5em">em</span>
  </span>
</p>

Результат.

Обычный текст.   Текст в em

Слово «em» сокращённо от «ephemeral unit».

rem

Единица измерения «rem» изменяется в зависимости от размера текста, заданного в теге <html> или :root.

:root {
  font-size: 14px;
}

По коду выше, «1rem» будет равнятся «14px», а «2rem» будет равняться «28px».

<p>
  <span style="font-size: 2rem">
    Текст в <span style="font-size: 2rem">em</span>
  </span>
</p>

В коде выше «2rem» будет равняться «28px». Вложенный элемент с «2rem» также будет равняться «28px», т.к. размер «rem» зависит не от текущего текста, а от размера, заданного в <html>.

Слово «rem» сокращённо от «root ephemeral unit».

vh и vw

Единицы измерения «vh» и «vw» задают ширину и высоту в зависимости от текущего размера окна браузера.

Размеры указываются в процентах, т.е. «50vw» означает «50%» от текущего размера экрана браузера.

Данную единицу измерения удобно использовать, когда надо растянуть блок весь экран пользователя.

Единицы измерения являются сокращённой формой слов «viewport width» и «viewport height». 

dvh и dvw

В мобильных устройствах есть так называемые «плавающие панели», которые появляются при прокрутки страницы (например на Айфоне снизу появляется строка запроса).

Единицы измерения «vh» и «vw» не учитывают данные плавающие панели, и может быть ситуация, что плавающая панель закрывает область (например кнопка в самом низу блока).

Чтобы блок подстраивался под плавающие панели, используются единицы измерения «dvw» и «dvh».

Единицы измерения являются сокращённой формой слов «dynamic viewport width» и «dynamic viewport height».

ex

Единицу измерения «ex» используется при использовании тегов <sup> и <sub>, когда надо указать отступ снизу или сверху.