CSS'теги rem бирдиктери

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