Воҳидҳои rem дар CSS

Воҳидҳои em ҳамеша ҳамроҳ намешаванд. Мушкилӣ ин аст, ки агар андозаи ҳарфи як тег иваз карда шавад, пас он барои ҳамаи тегҳои фарзандаш, ки андозаи худро нисбат ба он ҳисоб мекунанд, низ тағйир меёбад.

Аз ин рӯ, воҳидҳои rem ворид карда шуданд. Қиматҳои ин воҳидҳо ҳамеша нисбат ба андозаи ҳарфи муайянкардашуда барои теги html ҳисоб карда мешаванд.

Чун шумо аллакай медонед, қимати пешфарз ба 16px баробар аст:

html {
	font-size: 16px;
}

Биёед мисол дида бароем. Фарз мекунем, ки мо ин тегҳоро дорем:

<div>
	<p>
		матн
	</p>
</div>

Биёед ба онҳо андозаҳоро дар rem муайян кунем:

div {
	font-size: 2rem; /* ба 32px мувофиқ аст */
}
p {
	font-size: 2rem; /* ба 32px мувофиқ аст */
	margin: 2rem;    /* ба 32px мувофиқ аст */
}

Фарз мекунем, ки мо рамзи HTML дорем, ки барои он мо масъалаҳо ҳал хоҳем кард:

<main>
	<h1>сарпӯш</h1>
	<section>
		<h2>сарпӯш</h2>
		<p>
			матн
		</p>
		<p>
			матн
		</p>
	</section>
	<section>
		<h2>сарпӯш</h2>
		<p>
			матн
		</p>
		<p>
			матн
		</p>
	</section>
</main>

Ҳамаи воҳидҳои дар пикселҳо муайянкардашударо ба rem аз нависед:

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