CSSдаги rem бирликлари

em бирликлари ҳар доим қулай бўлмайди. Муаммо шундаки, агар бирорта тегга шрифт ўлчамини ўзгартирилса, у ўзига нисбатан ўлчам ҳисоблаган барча ворисли тегларга ҳам ўзгаради.

Шу сабабдан rem бирликлари киритилди. Ушбу бирликларнинг қийматлари ҳар доим html теги учун белгиланган шрифт ўлчамига нисбатан ҳисобланади.

Ҳамма билганингиздек, by default бу қиймат 16pxга тенг:

html {
	font-size: 16px;
}

Келгила, мисолда кўрамиз. Бизда куйидаги теглар бор деб фараз қилайлик:

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

Келгила, уларга rem даги ўлчамларни белгилаймиз:

div {
	font-size: 2rem; /* 32px га мос келади */
}
p {
	font-size: 2rem; /* 32px га мос келади */
	margin: 2rem;    /* 32px га мос келади */
}

Бизда куйидаги HTML коди бор деб фараз қилайлик, учун биз масалаларни ечамиз:

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

Пикселларда берилган барча бирликларни 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;
}