REM единици в CSS

Единиците em не винаги са удобни. Проблемът е, че ако се промени размерът на шрифта на един елемент, той ще се промени и за всички негови наследници, които изчисляват размера си спрямо него.

Затова бяха въведени единиците rem. Стойностите на тези единици винаги се изчисляват спрямо размера на шрифта, зададен за елемента html.

Както вече знаете, по подразбиране тази стойност е 16px:

html {
	font-size: 16px;
}

Нека разгледаме пример. Да предположим, че имаме следните елементи:

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

Нека им зададем размери в rem:

div {
	font-size: 2rem; /* съответства на 32px */
}
p {
	font-size: 2rem; /* съответства на 32px */
	margin: 2rem;    /* съответства на 32px */
}

Да предположим, че имаме 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>

Препишете в rem всички единици, зададени в пиксели:

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;
}