Rem-enheter i CSS

em-enheter är inte alltid bekväma. Problemet är att om man ändrar teckenstorleken för ett element kommer det också att ändras för alla dess barn-element, som beräknar sin storlek i förhållande till det.

Därför introducerades rem-enheter. Värdena för dessa enheter beräknas alltid i förhållande till teckenstorleken som anges för html-elementet.

Som du redan vet är standardvärdet 16px:

html {
	font-size: 16px;
}

Låt oss titta på ett exempel. Antag att vi har följande element:

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

Låt oss ange deras storlekar i rem:

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

Antag att vi har HTML-kod, för vilken vi skall lösa uppgifterna:

<main>
	<h1>rubrik</h1>
	<section>
		<h2>rubrik</h2>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</section>
	<section>
		<h2>rubrik</h2>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</section>
</main>

Skriv om alla enheter angivna i pixlar till 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;
}