В CSS существует несколько единиц измерения, что периодически приводит к путанице: какие единицы использовать? Давайте рассмотрим употребление некоторых из них.
⠀
✔️ px — это абсолютная единица измерения величины объектов относительно размера экрана.
⠀
Представим ситуацию, что при помощи px задано 100 элементов и нужно изменить их размеры. Тогда придется это делать вручную. А если изменения потребуются опять?
⠀
В таком случае на помощь приходят относительные (пропорциональные) единицы измерения.
⠀
✔️ em — относительная единица, основанная на размере шрифта родительского элемента (font-size): 1,2em, 0.8em, 2.4em. Что это значит?
⠀
Давайте посчитаем. Если текущий (родительский) размер шрифта составляет 16рх (это будет 1em), то 1.2em = 16*1,2 = 19,2px.
⠀
Теперь при изменении родительского шрифта остальные размеры будут меняться автоматически, сохраняя заданные пропорции.
⠀
✔️ rem (root em) — единица, основанная на размере шрифта корневого элемента html. В этом и состоит его главное отличие от em.
⠀
Основная задача rem — упростить вычислительные сложности, которые могут возникнуть при использовании em. С помощью rem можно добиться удобного масштабирования для шрифтов, которое не будет влиять на другие элементы.
⠀
Как считать rem? Например, базовый шрифт — 16px, необходимый шрифт — 14px. Тогда 14/16 = 0.875rem.
⠀
Помимо работы с размером шрифта, эти единицы также используют для работы с padding/margin (внутренние/внешние отступы), width/height (параметры ширины/высоты) и так далее.
⠀
Тогда что лучше использовать: em или rem? Вопрос неоднозначный, потому что у каждой из единиц есть свои плюсы и минусы. Но если коротко, то использовать em лучше, когда элемент масштабируется относительно родителя. Например, нужно в тексте размером 16px использовать svg-иконку, чтобы она соответствовала размеру текста, тогда для тега p мы зададим font-size: 16px, а для svg мы установим width и height равные 1em. Во всех остальных случая лучше использовать rem. К тому же, em и rem можно использовать вместе, чтобы создавать простые модульные компоненты.
⠀
Так, относительные единицы измерения более практичны и обеспечивают масштабируемость продукта, что влияет на улучшение его качества👍