CSS rem-eenhede

em-eenhede is nie altyd gerieflik nie. Die probleem is dat as jy die lettergrootte vir een etikett verander, sal dit ook verander vir al sy afstammeling-etikette wat hul grootte relatief tot dit bereken.

Daarom is die rem-eenhede ingestel. Die waardes van hierdie eenhede word altyd bereken relatief tot die lettergrootte wat vir die html-etikett gestel is.

Soos jy reeds weet, is hierdie waarde 16px by verstek:

html {
	font-size: 16px;
}

Kom ons kyk na 'n voorbeeld. Gestel ons het die volgende etikette:

<div>
	<p>
		teks
	</p>
</div>

Kom ons spesifiseer hul groottes in rem:

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

Gestel ons het die HTML-kode waarvoor ons probleme sal oplos:

<main>
	<h1>kop</h1>
	<section>
		<h2>kop</h2>
		<p>
			teks
		</p>
		<p>
			teks
		</p>
	</section>
	<section>
		<h2>kop</h2>
		<p>
			teks
		</p>
		<p>
			teks
		</p>
	</section>
</main>

Herskryf na rem alle eenhede wat in pixels gegee is:

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