CSS-də rem vahidləri

em vahidləri həmişə əlverişli deyil. Problem ondadır ki, əgər bir teqin şrift ölçüsü dəyişdirilsə, o, öz ölçüsünü ona nisbətən hesablayan bütün törəmə teqlərdə də dəyişəcək.

Buna görə də rem vahidləri təqdim edildi. Bu vahidlərin dəyərləri həmişə html teqi üçün təyin edilmiş şrift ölçüsünə nisbətən hesablanır.

Artıq bildiyiniz kimi, standart olaraq bu dəyər 16px-ə bərabərdir:

html {
	font-size: 16px;
}

Gəlin bir nümunəyə baxaq. Tutaq ki, bizdə bunlar kimi teqlər var:

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

Gəlin onlara rem ilə ölçülər təyin edək:

div {
	font-size: 2rem; /* 32px-ə uyğundur */
}
p {
	font-size: 2rem; /* 32px-ə uyğundur */
	margin: 2rem;    /* 32px-ə uyğundur */
}

Tutaq ki, bizim üçün məsələləri həll edəcəyimiz HTML kodumuz var:

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

Piksellərdə təyin edilmiş bütün vahidləri rem ilə yenidən yazın:

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