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 |