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