Vitengo vya rem katika CSS

Vitengo vya em sio rahisi kila wakati. Shida ni kwamba ukibadilisha ukubwa wa herufi kwa kitambulisho kimoja, basin itabadilika kwa vitambulisho vyote vinavyotokana navyo, vinavyokokotoa ukubwa wao kuhusiana nayo.

Kwa hiyo vitengo vya rem vilianzishwa. Thamani za vitengo hizi kila wakati hukokotolewa kuhusiana na ukubwa wa herufi uliowekwa kwa kitambulisho html.

Kama unavyojua tayari, kwa chaguo-msingi thamani hii ni sawa na 16px:

html {
	font-size: 16px;
}

Wacha tuangalie kwa mfano. Hebu tuseme tuna vitambulisho kama hivi:

<div>
	<p>
		maandishi
	</p>
</div>

Wacha tuweke viwango vyao katika rem:

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

Hebu tuseme tuna msimbo wa HTML, ambao tutafanyia kazi shida:

<main>
	<h1>kichwa</h1>
	<section>
		<h2>kichwa</h2>
		<p>
			maandishi
		</p>
		<p>
			maandishi
		</p>
	</section>
	<section>
		<h2>kichwa</h2>
		<p>
			maandishi
		</p>
		<p>
			maandishi
		</p>
	</section>
</main>

Andika upya katika rem vitengo vyote vilivyopewwa kwenye saizi za pikseli:

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