< H / $ > Хак/Собесов

Перейти на PRO

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

«В чем разница между em, rem и px» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Тип вопроса: CSS Вероятность: 10% Категория: Frontend Разработчик

Ответ

em и rem — относительные единицы, а px — абсолютная.

px (пиксели) — фиксированный размер, не зависит от других настроек.

    .element { font-size: 16px; } /* всегда 16px */

em — зависит от font-size родителя. Если родитель имеет font-size: 20px, то 1em = 20px.

    .parent { font-size: 20px; }
    .child { font-size: 1.5em; } /* 30px (1.5 × 20px) */

rem (root em) — зависит от font-size корневого элемента (<html>). По умолчанию 1rem = 16px.

    html { font-size: 10px; }
    .element { font-size: 2rem; } /* 20px (2 × 10px) */

Когда использовать:

px — для точных размеров (например, границы).
em — если нужно масштабирование относительно родителя.
rem — для гибкого и предсказуемого масштабирования всей страницы.