Enote rem v CSS

Enote em niso vedno priročne. Težava je v tem, da če spremenite velikost pisave enemu oznaki, se bo spremenila tudi vsem njegovim podrejenim oznakam, ki izračunajo svojo velikost glede nanj.

Zato so bile uvedene enote rem. Vrednosti teh enot so vedno izračunane glede na velikost pisave, določeno za oznako html.

Kot že veste, je privzeta vrednost enaka 16px:

html {
	font-size: 16px;
}

Poglejmo si na primeru. Recimo, da imamo takšne oznake:

<div>
	<p>
		besedilo
	</p>
</div>

Določimo jim velikosti v rem:

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

Recimo, da imamo HTML kodo, za katero bomo reševali naloge:

<main>
	<h1>glava</h1>
	<section>
		<h2>glava</h2>
		<p>
			besedilo
		</p>
		<p>
			besedilo
		</p>
	</section>
	<section>
		<h2>glava</h2>
		<p>
			besedilo
		</p>
		<p>
			besedilo
		</p>
	</section>
</main>

Prepišite v rem vse enote, podane v slikovnih pikah:

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