Njësitë rem në CSS

Njësitë em nuk janë gjithmonë të përshtatshme. Problemi është se nëse ndryshon madhësinë e shkronjave për një tag, atëherë ajo do të ndryshojë edhe për të gjithë pasardhësit e tij, të cilët e llogarisin madhësinë e tyre relative me të.

Prandaj u prezantuan njësitë rem. Vlerat e këtyre njësive gjithmonë llogariten relative me madhësinë e shkronjave të përcaktuar për tagin html.

Siç e dini tashmë, si parazgjedhje kjo vlerë është 16px:

html {
	font-size: 16px;
}

Le të shohim me një shembull. Le të themi se kemi këto tagje:

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

Le t'u caktojmë atyre madhësi në rem:

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

Le të themi se kemi kod HTML, për të cilin do të zgjidhim problema:

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

Rishkruani në rem të gjitha njësitë, të dhëna në piksel:

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