rem

Единица rem соответствует значению свойства font-size корневого элемента <html>. Если rem добавляется непосредственно к font-size для <html> или стиль для <html> не задан, тогда 1rem принимается равным исходному значению font-size. В браузерах по умолчанию 1rem = 16px.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>rem</title> <style> html { font-size: 62.5%; } /* 10px */ body { font-size: 1.8rem; } /* 18px */ h1 { font-size: 2.8rem; } /* 28px */ </style> </head> <body> <h1>Почему возможна интроекция?</h1> <p>Как отмечает Д. Майерс, у нас есть некоторое чувство конфликта, которое возникает с ситуации несоответствия желаемого и действительного.</p> </body> </html>

В данном примере размер шрифта для корневого элемента задан в процентах, в итоге получается равным 10px. Для размеров основного текста и заголовка применяется единица rem, которая считается относительно уже заданного размера html.

Спецификация

Спецификация Статус
CSS Values and Units Module Level 4 Рабочий проект
CSS Values and Units Module Level 3 Возможная рекомендация

Браузеры

9 12 4 11.6 4.1 3.6
2 4 12 4

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также