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 {  font-size: 2em;  width: 5em;}
          .block__elem {
  font-size: 2em;
  width: 5em;
}

        
        
          
        
      

Как пишется

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

Как и другие CSS-единицы измерения (px, pt, vw, vh и другие) — пишутся сразу после числового значения без пробела:

        
          
          .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> также пропорционально изменится (даже если было задано явно). Если при вёрстке вы сможете найти закономерности размеров относительно размера шрифта (даже внешние отступы margin, внутренние отступы padding, ширины width или высоты height), то такое масштабирование будет происходить более пропорционально.

Алёна Батицкая

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

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

        
          
          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.

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