rem, em

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Задаёт размер относительно величины шрифта родительского элемента — em (от ephemeral unit — «относительная единица измерения») или корневого элемента <html> или <svg>rem (от root ephemeral unit — «главная относительная единица»).

Пример

Секция статьи "Пример"

Пусть размер шрифта корневого элемента <html> будет равен 16 пикселям:

        
          
          html {  font-size: 16px;}
          html {
  font-size: 16px;
}

        
        
          
        
      

Тогда размер шрифта элемента с классом block будет равен 16px × 1,5 = 24px:

        
          
          .block {  font-size: 1.5rem;}
          .block {
  font-size: 1.5rem;
}

        
        
          
        
      

Значение в единицах em всегда рассчитывается от размера шрифта элемента: оно либо наследуется от родителя, либо задаётся на самом элементе. Продолжая наш пример, если элементу блока просто задать ширину 5em, то для расчёта будет использован унаследованный размер шрифта: 16px × 1,5 × 5 = 120px.

        
          
          .block__elem {  width: 5em;}
          .block__elem {
  width: 5em;
}

        
        
          
        
      

А если самому элементу задать размер шрифта 2em, то к унаследованному размеру добавится ещё один множитель: 16px × 1,5 × 5 × 2 = 240px.

        
          
          .block__elem {  width: 5em;  font-size: 2em;}
          .block__elem {
  width: 5em;
  font-size: 2em;
}

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

Как и все остальные единицы измерения в CSS — em и rem пишутся сразу после числового значения без пробела:

        
          
          .selector {  width: 10em;}.selector {  margin: 5rem;}
          .selector {
  width: 10em;
}

.selector {
  margin: 5rem;
}

        
        
          
        
      

Как понять

Секция статьи "Как понять"

Единицы em и rem используют для вычисления размера шрифта, но применимы вычисленные значения для любых свойств, в которых указываются размеры: width, height, padding, margin, border-width и так далее.

Итоговое значение размера, заданное через em и rem, вычисляется динамически и меняется, когда значение, от которого вычислялось em и rem, изменится.

Подсказки

Секция статьи "Подсказки"

💡 Часто при работе с rem для селектора html пишется следующее CSS-правило:

        
          
          html {  font-size: 62.5%;}
          html {
  font-size: 62.5%;
}

        
        
          
        
      

Магическое число 62.5% равняется 10 пикселям при учёте, что стандартный размер шрифта браузера по умолчанию равен 16 пикселям. 16px = 100%, 10px = 62.5%.

Когда 1rem = 10px гораздо проще вести все расчёты при вёрстке.

На практике

Секция статьи "На практике"

Realetive советует

Секция статьи "Realetive советует"

🛠 Если размер страницы был изменён глобально, то есть через настройки операционной системы или с помощью Ctrl + / Ctrl -, то значение шрифта у <html> также пропорционально изменится, даже если оно было задано явно. Такое масштабирование будет происходить более пропорционально, если при вёрстке вы сможете найти закономерности размеров элементов относительно размера шрифта.

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

🛠 При помощи относительных единиц шрифта можно классно верстать адаптивные сайты. Например, если в мобильном и десктопном макетах пропорции одинаковые, и меняются только фактические размеры, то можно сделать, например, так:

        
          
          html {  /* 10px */  font-size: 62.5%;}.title-block {  /* 10rem * 10px = 100px */  width: 10rem;  /* 2rem * 10px = 20px */  font-size: 2rem;}@media (max-width: 640px) {  html {    /* 8px */    font-size: 50%;  }}
          html {
  /* 10px */
  font-size: 62.5%;
}

.title-block {
  /* 10rem * 10px = 100px */
  width: 10rem;
  /* 2rem * 10px = 20px */
  font-size: 2rem;
}

@media (max-width: 640px) {
  html {
    /* 8px */
    font-size: 50%;
  }
}

        
        
          
        
      

Без дополнительных правил ширина блока уменьшилась до 80px, а размер шрифта внутри до 16px.

Всего одним правилом мы масштабировали размеры блока и шрифта внутри него. Очень элегантное решение 😇