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