Rem что это. Единицы измерения в CSS: rem, em и другие. Полное руководство

alexxlabРазное
Что такое rem и em в CSS. Чем отличаются rem и em. Когда использовать rem, а когда em. Какие еще есть единицы измерения в CSS. Как правильно выбрать единицы измерения для вашего проекта.

Содержание

Что такое rem и em в CSS

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

Давайте разберемся, что представляют собой эти единицы измерения и в чем их ключевые отличия:

Единица измерения em

Em — это относительная единица, которая зависит от размера шрифта родительского элемента. Например:


.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em; /* 16px * 1.5 = 24px */
  padding: 1em; /* 24px */
}

В этом примере размер шрифта дочернего элемента будет равен 24px (1.5 * 16px), а отступы — также 24px, так как для других свойств em берет за основу размер шрифта самого элемента.


Единица измерения rem

Rem (root em) — это относительная единица, которая всегда опирается на размер шрифта корневого элемента <html>. Например:


html {
  font-size: 16px;
}

.element {
  font-size: 1.5rem; /* 16px * 1.5 = 24px */
  padding: 1rem; /* 16px */
}

Здесь размер шрифта элемента будет 24px, а отступы — 16px, так как rem всегда берет за основу размер шрифта <html>.

Ключевые отличия rem и em

Главное отличие rem от em заключается в том, что rem всегда ссылается на размер шрифта корневого элемента, а em — на размер шрифта родительского элемента. Это дает rem следующие преимущества:

  • Предсказуемость — размеры всегда вычисляются от одного значения
  • Отсутствие каскадного эффекта при вложенности элементов
  • Удобство глобального масштабирования сайта через изменение font-size у html

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

Когда использовать rem, а когда em

Выбор между rem и em зависит от конкретной задачи:


Рекомендуется использовать rem:

  • Для задания размера шрифта
  • Для глобальных отступов и размеров
  • Когда нужна предсказуемость размеров

Рекомендуется использовать em:

  • Для локальных отступов внутри компонентов
  • Когда размер должен зависеть от родителя
  • Для создания масштабируемых компонентов

Другие единицы измерения в CSS

Помимо rem и em в CSS есть и другие полезные единицы измерения:

Пиксели (px)

Абсолютная единица измерения, задает точный размер элемента. Удобна для задания границ, теней и других мелких деталей.

Проценты (%)

Задают размер относительно родительского элемента. Часто используются для ширины и высоты.

Viewport units (vw, vh, vmin, vmax)

Относительные единицы, зависящие от размеров viewport (области просмотра браузера):

  • vw — 1% ширины viewport
  • vh — 1% высоты viewport
  • vmin — наименьшее из vw и vh
  • vmax — наибольшее из vw и vh

Как выбрать подходящие единицы измерения

При выборе единиц измерения для вашего проекта учитывайте следующие факторы:


  • Требования к адаптивности дизайна
  • Необходимость масштабирования элементов
  • Совместимость с целевыми браузерами
  • Удобство поддержки и изменения кода

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

Практические примеры использования rem и em

Рассмотрим несколько практических примеров использования rem и em в реальных проектах:

Пример 1: Адаптивная типографика


html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

h1 {
  font-size: 2.5rem; /* 40px на десктопе, 35px на мобильных */
}

p {
  font-size: 1rem; /* 16px на десктопе, 14px на мобильных */
  line-height: 1.5;
}

В этом примере мы используем rem для создания адаптивной типографики. Изменяя размер шрифта у html, мы легко масштабируем весь текст на сайте для разных устройств.

Пример 2: Масштабируемый компонент кнопки


.button {
  font-size: 1rem;
  padding: 0.5em 1em;
  border-radius: 0.25em;
}

.button-large {
  font-size: 1.25rem;
}

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


Распространенные ошибки при использовании rem и em

При работе с rem и em новички часто допускают следующие ошибки:

  • Использование em для font-size во вложенных элементах, что приводит к неожиданному каскадному эффекту
  • Забывание установить базовый font-size для html, из-за чего расчеты становятся непредсказуемыми
  • Смешивание px и относительных единиц, что усложняет масштабирование
  • Использование rem там, где лучше подойдет em, и наоборот

Чтобы избежать этих ошибок, всегда помните о различиях между rem и em и тщательно продумывайте структуру ваших стилей.

Производительность и совместимость

Использование rem и em практически не влияет на производительность по сравнению с px. Однако есть несколько нюансов, которые стоит учитывать:

  • rem не поддерживается в IE8 и ниже
  • Чрезмерное использование em может усложнить отладку из-за каскадных эффектов
  • При использовании rem для размеров контейнеров могут возникать проблемы с округлением, приводящие к небольшим смещениям

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


Заключение

Единицы измерения rem и em предоставляют мощные инструменты для создания гибких и адаптивных макетов в CSS. Понимание их особенностей и правильное применение позволяет создавать более масштабируемые и легко поддерживаемые стили.

Ключевые моменты, которые стоит запомнить:

  • rem всегда относится к размеру шрифта html, em — к родительскому элементу
  • rem удобен для глобальных размеров, em — для локальных
  • Комбинирование rem и em позволяет добиться баланса между гибкостью и предсказуемостью
  • При выборе единиц измерения учитывайте требования проекта и целевую аудиторию

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


px, em, rem и другие

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

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

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

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

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

Достоинства

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

Недостатки

  • Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Существуют также «производные» от пикселя единицы измерения: mm, cm, pt и pc, но они давно отправились на свалку истории.

Вот, если интересно, их значения:

  • 1mm (мм) = 3.8px
  • 1cm (см) = 38px
  • 1pt (типографский пункт) = 4/3 px
  • 1pc (типографская пика) = 16px

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em, 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Например, давайте сравним px с em на таком примере:

<div>
  Страусы
  <div>Живут также в Африке</div>
</div>

24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в

<div> одинаков.

А вот аналогичный пример с em вместо px:

<div>
  Страусы
  <div>Живут также в Африке</div>
</div>

Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1. 5 раза больше, чем первая.

Выходит, размеры, заданные в em, будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как

р, g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

В спецификации указаны также единицы ex и ch, которые означают размер символа "x" и размер символа "0".

Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква "x" и ноль "0". В этом случае они носят более условный характер.

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

Проценты %, как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

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

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.

Вот пример с %, он выглядит в точности так же, как с em:

<div>
  Страусы
  <div>Живут также в Африке</div>
</div>

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых % берётся не так:

margin-left
При установке свойства margin-left в %, процент берётся от ширины родительского блока, а вовсе не от его margin-left.
line-height
При установке свойства line-height в %, процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height.
width/height
Для width/height обычно процент от ширины/высоты родителя, но при position:fixed, процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Итак, мы рассмотрели:

  • px – абсолютные, чёткие, понятные, не зависящие ни от чего.
  • em – относительно размера шрифта.
  • % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl++, но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

Какую единицу использовать для задания шрифтов? Наверно не px, ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.

Следующие кандидаты – em и %.

Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em.

Вроде бы, использовать можно, однако есть проблема.

Попробуем использовать этот подход для <li>.

Протестируем на таком списке:

<ul>
<li>Собака
  <ul>
  <li>бывает
    <ul>
    <li>кусачей
      <ul>
      <li>только
        <ul>
        <li>от жизни
          <ul>
          <li>собачей</li>
          </ul>
        </li>
        </ul>
      </li>
      </ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
</ul>

Пока это обычный вложенный список.

Теперь уменьшим размер шрифта до 0.8em, вот что получится:

<style>
  li {
    font-size: 0.8em;
  }
</style>
<ul>
<li>Собака
  <ul>
  <li>бывает
    <ul>
    <li>кусачей
      <ul>
      <li>только
        <ul>
        <li>от жизни
          <ul>
          <li>собачей</li>
          </ul>
        </li>
        </ul>
      </li>
      </ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
</ul>

Проблема очевидна. Хотели, как лучше, а получилось… Мелковато. Каждый вложенный <li> получил размер шрифта 0.8 от родителя, в итоге уменьшившись до нечитаемого состояния. Это не совсем то, чего мы бы здесь хотели.

Можно уменьшить размер шрифта только на одном «корневом элементе»… Или воспользоваться единицей rem, которая, можно сказать, специально придумана для таких случаев!

Единица rem задаёт размер относительно размера шрифта элемента <html>.

Как правило, браузеры ставят этому элементу некоторый «разумный» (reasonable) размер по умолчанию, который мы, конечно, можем переопределить и использовать rem для задания шрифтов внутри относительно него:

<style>
  html {
    font-size: 14px;
  }
  li {
    font-size: 0.8rem;
  }
</style>
<div><button>Кликните, чтобы увеличить размер шрифта</button></div>
<img src="https://js.cx/clipart/angry_dog. png">
<ul>
<li>Собака
  <ul>
  <li>бывает
    <ul>
    <li>кусачей
      <ul>
      <li>только
        <ul>
        <li>от жизни
          <ul>
          <li>собачей</li>
          </ul>
        </li>
        </ul>
      </li>
      </ul>
    </li>
    </ul>
  </li>
  </ul>
</li>
</ul>
<script>
let html = document.documentElement;
up.onclick = function() {
  // при помощи JS увеличить размер шрифта html на 2px
  html.style.fontSize = parseInt(getComputedStyle(html, '').fontSize) + 2 + 'px';
};
</script>

Получилось удобное масштабирование для шрифтов, не влияющее на другие элементы.

Элементы, размер которых задан в rem, не зависят друг от друга и от контекста – и этим похожи на px, а с другой стороны они все заданы относительно размера шрифта <html>.

Единица rem не поддерживается в IE8-.

Во всех современных браузерах, исключая IE8-, поддерживаются новые единицы из черновика стандарта CSS Values and Units 3:

  • vw – 1% ширины окна
  • vh – 1% высоты окна
  • vmin – наименьшее из (vw, vh), в IE9 обозначается vm
  • vmax – наибольшее из (vw, vh)

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

Их основное преимущество – в том, что любые размеры, которые в них заданы, автоматически масштабируются при изменении размеров окна.

Этот текст написан с размером `5vh`.

Вы сможете легко увидеть, как работает vh, если поменяете высоту окна браузера. Текст выше будет расти/уменьшаться.

Мы рассмотрели единицы измерения:

  • px – абсолютные пиксели, к которым привязаны и потому не нужны mm, cm, pt и pc. Используется для максимально конкретного и точного задания размеров.
  • em – задаёт размер относительно шрифта родителя, можно относительно конкретных символов: "x"(ex) и "0"(ch), используется там, где нужно упростить масштабирование компоненты.
  • rem – задаёт размер относительно шрифта <html>, используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в rem, а JS меняет шрифт у <html>.
  • % – относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты.
  • vw, vh, vmin, vmax – относительно размера экрана.

Единицы измерения CSS: rem vs em