:root {
font-size: 16px; // 1rem = 16px
}
div {
padding: .5rem; // 8px
}
Вся гибкость заключается в том, что изменив в одном месте базовый размер шрифта, все размеры, указанные в rem/em, будут пересчитаны автоматически. Если всё указывать в px, то все правки вручную.
- rem — базовый размер шрифта;
- em — текущий размер шрифта;
- px — виртуальный пиксель.
Полпикселя легко можно увидеть на экранах с высокой плотностью. Те же мобильники с экраном 1920×1080px (реальных) имеют меньше виртуальных пикселей (используемых в CSS). Т. е., на один виртуальный (программный) пиксель приходится несколько реальных пикселей.
