В чем разница между px, rem и em?

Единицы CSS

В CSS вы можете найти различные единицы измерения для всех элементов, составляющих документ ‹html›, наиболее часто используемыми всеми являются px , однако, как объясняется в MDN, существует гораздо больше. На этот раз мы сосредоточимся на основных различиях между абсолютными единицами измерения и относительными единицами em и rem.

Абсолютные единицы не изменяются в размере, а относительные единицы изменяются в соответствии с размером шрифта родительского элемента.

Пиксели

Пиксели являются фиксированными единицами внутри документа и не являются относительными и не зависят от других единиц или вариантов шрифта. В следующем примере у нас есть контейнер с классом .units шириной 200 пикселей и высотой 100 пикселей.

.units {
  width: 200px;
  height: 100px;
}

Помните, что по умолчанию большинство браузеров имеют размер шрифта: 16px в корневом элементе‹html›в этом случае, когда мы используем абсолютные единицы, поэтому размер шрифта корневого элемента изменяется, наш контейнер останется с той же шириной и высотой определены изначально.

Рем

Единицы rem — это единицы относительно корневого элемента ‹html›, помните, что в большинстве браузеров размер шрифта: 16px, возвращаясь к нашему примеру с контейнером, в котором размер составляет 200px в ширину и 100px в высоту, теперь, когда вы означает, что это относительно корневого элемента, это означает, что 1rem = размер шрифта корневого элемента

1rem = 16px  //When the font size of the root element has not changed.

В следующем примере мы будем конвертировать из px в rem, как вы можете видеть, наш контейнер по-прежнему сохраняет ширину и высоту, изначально определенные как 200px x 100px, поскольку размер шрифта равен 16px.

.units {
  width: 12.5rem; // 12.5rem = 200px / 16px (font size of root element)
  height: 6.25rem; // 6.25rem = 100px / 16px (font size of root element)
}

Теперь, в случае, если наш источник корневого элемента изменится, например, на 24px, наш контейнер будет иметь следующие меры:

.units {
  width: 12.5rem; // 12.5rem * 24px (new font size of root element) = 300px
  height: 6.25rem; // 6.25rem * 24px (new font size of root element) = 150px
}