Јединице rem у CSS-у

Јединице em нису увек погодне. Проблем је у томе што ако променимо величину фонта једном елементу, она ће се променити и свим његовим потомцима, који своју величину израчунавају у односу на њега.

Због тога су уведене јединице rem. Вредности ових јединица увек се израчунавају у односу на величину фонта задату за елемент html.

Као што већ знате, подразумевана вредност једнака је 16px:

html {
	font-size: 16px;
}

Погледајмо на примеру. Претпоставимо да имамо ове елементе:

<div>
	<p>
		текст
	</p>
</div>

Задајмо им величине у rem:

div {
	font-size: 2rem; /* одговара 32px */
}
p {
	font-size: 2rem; /* одговара 32px */
	margin: 2rem;    /* одговара 32px */
}

Претпоставимо да имамо HTML код, за који ћемо решавати задатке:

<main>
	<h1>наслов</h1>
	<section>
		<h2>наслов</h2>
		<p>
			текст
		</p>
		<p>
			текст
		</p>
	</section>
	<section>
		<h2>наслов</h2>
		<p>
			текст
		</p>
		<p>
			текст
		</p>
	</section>
</main>

Препишите у rem све јединице задате у пикселима:

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