Пиксели — самая понятная единица измерения в CSS, потому что она задаёт конкретный, предсказуемый размер. Но именно эта предсказуемость иногда оборачивается проблемой: если пользователь увеличивает масштаб шрифта в настройках браузера, элементы, заданные строго в пикселях, могут не подстроиться под это изменение так же гладко, как хотелось бы.
Rem отсчитывается от размера шрифта корневого элемента страницы, обычно html. Если пользователь меняет базовый размер шрифта в браузере, все значения в rem пропорционально пересчитываются, и вёрстка остаётся масштабируемой. Именно поэтому rem часто рекомендуют для размеров шрифта, отступов и вообще большинства значений в макете.
Em похож на rem, но отсчитывается от размера шрифта не корня, а ближайшего родителя. Это удобно для внутренних отступов конкретного компонента, которые должны расти вместе с его собственным текстом, но может привести к неожиданному накоплению при глубокой вложенности элементов друг в друге.
Проценты особенно полезны для ширины блоков относительно родителя — блок с width 50% всегда займёт половину доступного пространства, независимо от того, насколько широк экран. Для адаптивной вёрстки без медиазапросов это один из самых базовых инструментов.
Отдельная группа единиц привязана к размеру окна браузера — vw и vh, доля от ширины и высоты видимой области соответственно. Крупный заголовок на всю ширину экрана или блок высотой ровно в весь первый экран часто делают именно через эти единицы.
Сравнение всех единиц измерения CSS и рекомендации, когда какую использовать, собраны в статье про значения и единицы измерения на MDN.
Смешивать единицы в одном проекте — нормальная практика: типографику часто задают в rem, внутренние отступы компонентов в em, ширину колонок в процентах, а высоту приветственного экрана во vh. Единого правильного варианта на все случаи не существует, важно понимать, зачем выбрана именно эта единица в конкретном месте.
