Jednotky rem v CSS

Jednotky em nie sú vždy pohodlné. Problém je v tom, že ak zmeníte veľkosť písma jednému elementu, zmení sa aj všetkým jeho potomkom, ktorí počítajú svoju veľkosť relatívne vzhľadom na neho.

Preto boli zavedené jednotky rem. Hodnoty týchto jednotiek sa vždy počítajú relatívne k veľkosti písma nastavenej pre element html.

Ako už viete, štandardne je táto hodnota rovná 16px:

html {
	font-size: 16px;
}

Pozrime sa na príklad. Predpokladajme, že máme takéto elementy:

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

Nastavme im veľkosti v rem:

div {
	font-size: 2rem; /* zodpovedá 32px */
}
p {
	font-size: 2rem; /* zodpovedá 32px */
	margin: 2rem;    /* zodpovedá 32px */
}

Predpokladajme, že máme HTML kód, pre ktorý budeme riešiť úlohy:

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

Prepíšte všetky jednotky uvedené v pixeloch na 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;
}