Поясніть різницю між одиницями вимірювання px, em, rem.

Повне пояснення

Що це і навіщо

• px (pixel) – абсолютна одиниця, що відповідає одному фізичному пікселю екрана. Вона забезпечує точну позиціювання, але не масштабується при зміні розміру шрифту.
• em – відносна одиниця, що базується на font-size батьківського елемента. Якщо батько має 16 px, то 1em дорівнює 16 px; при зміні розміру шрифту батька em масштабуються.
• rem – відносна одиниця, що базується на font-size кореневого (html) елемента. Це дозволяє створювати глобально масштабовані інтерфейси.

Ключові принципи, терміни, інваріанти

• Absolute vs. Relative: px – абсолютна, em/rem – відносна.
• Inheritance: em наслідує розмір шрифту батька, rem завжди посилається на корінь.
• Cascade: При змінах font-size у батьківських елементах, em змінюється, а rem залишаєся незмінним.

Як це працює (життєвий цикл, алгоритм)

1. Браузер визначає font-size кореневого елемента (наприклад, 16 px).
2. Для rem множить значення на цей базовий розмір.
3. Для em браузер підраховує поточний font-size батька і множить на задане значення.

Практика і реалізація (React/Next.js)

const Box = styled.div`
  width: 10rem;
  padding: 1em; // масштабується від батька
`;

Тестування

• У Jest можна перевіряти getComputedStyle(element).fontSize.
• В Cypress: cy.get('.box').should('have.css', 'font-size', '160px').

Оптимізація продуктивності

• Використання rem зменшує кількість перерахунків при зміні розміру шрифту.
• em підходить для локальних масштабованих компонентів, що не залежать від глобального розміру.

Accessibility

• Масштабовані одиниці (em, rem) підтримують збільшення шрифту користувачами.
• px може порушувати доступність, якщо не комбіновано з відносними одиницями.

Безпека та валідація

• Немає прямого впливу на XSS, але неправильне використання em може призвести до непередбачуваних розмірів.

Типові помилки й edge cases

• Зміна font-size у батькові без оновлення дочірніх елементів, що використовують em.
• Використання px у медіа-запитах, що не масштабуються.

Cheatsheet + можливі follow-up питання

• px: точний, абсолютний.
• em: масштабується від батька.
• rem: масштабується від кореня.

Follow‑up: Як em і rem впливають на доступність? Чому rem часто вибирають для глобальних стилів?