Одиниці rem у CSS

Проблема одиниці em

Одиниця em розраховується відносно розміру шрифту батьківського елемента. Через це зміна font-size одного елемента може вплинути на розміри його дочірніх елементів, які використовують em.

Щоб уникнути такої залежності від вкладеності, у CSS існує одиниця rem.

Одиниця rem

Одиниця rem означає root em. Її значення завжди розраховується відносно font-size кореневого елемента html, незалежно від того, наскільки глибоко вкладений елемент.

html { font-size: 16px; }

Якщо для html задано font-size: 16px, то 1rem дорівнює 16px, 2rem — 32px, 1.5rem — 24px, а 0.75rem — 12px.

<div><p>text</p></div>

div { font-size: 2rem; } p { font-size: 2rem; margin: 2rem; }

Розрахунок rem

Щоб перевести значення з px у rem, потрібно поділити потрібний розмір на font-size елемента html.

rem = потрібний_розмір / font-size_html;

Наприклад, якщо html має font-size: 16px, то 32px = 2rem, 24px = 1.5rem, 20px = 1.25rem, а 12px = 0.75rem.

Практичне завдання

Використовуйте такий HTML-код для виконання завдання:

<main><h1>header</h1><section><h2>header</h2><p>text</p><p>text</p></section><section><h2>header</h2><p>text</p><p>text</p></section></main>

main { margin: 64px auto 32px; } h1 { font-size: 32px; } section { font-size: 16px; margin-bottom: 32px; } h2 { font-size: 24px; margin-bottom: 32px; } p { font-size: 20px; margin-bottom: 12px; }

main { margin: 4rem auto 2rem; } h1 { font-size: 2rem; } section { font-size: 1rem; margin-bottom: 2rem; } h2 { font-size: 1.5rem; margin-bottom: 2rem; } p { font-size: 1.25rem; margin-bottom: 0.75rem; }