Rem-enheder i CSS

em-enheder er ikke altid praktiske. Problemet er, at hvis du ændrer skriftstørrelsen for et element, vil den også ændre sig for alle dets child-elementer, som beregner deres størrelse i forhold til det.

Derfor blev rem-enheder introduceret. Værdier for disse enheder beregnes altid i forhold til skriftstørrelsen indstillet for html-elementet.

Som du allerede ved, er standardværdien 16px:

html {
	font-size: 16px;
}

Lad os se på et eksempel. Antag, at vi har følgende elementer:

<div>
	<p>
		tekst
	</p>
</div>

Lad os give dem størrelser i rem:

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

Antag, at vi har HTML-kode, som vi vil løse opgaver for:

<main>
	<h1>overskrift</h1>
	<section>
		<h2>overskrift</h2>
		<p>
			tekst
		</p>
		<p>
			tekst
		</p>
	</section>
	<section>
		<h2>overskrift</h2>
		<p>
			tekst
		</p>
		<p>
			tekst
		</p>
	</section>
</main>

Omskriv alle enheder angivet i pixels til 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;
}