CSSda rem birliklari

em birliklari har doim qulay bo‘lavermaydi. Muammo shundaki, agar biron bir tegga shrift o‘lchamini o‘zgartirilsa, u o‘ziga nisbatan o‘lchamni hisoblaydigan barcha avlod teglariga ham o‘zgaradi.

Shuning uchun rem birliklari joriy qilindi. Ushbu birliklarning qiymatlari har doim html tegi uchun belgilangan shrift o‘lchamiga nisbatan hisoblanadi.

Ma'lumotingizdek, standart qiymati 16px ga teng:

html {
	font-size: 16px;
}

Keling, bir misolni ko'rib chiqaylik. Faraz qilaylik, bizda quyidagi teglar mavjud:

<div>
	<p>
		matn
	</p>
</div>

Keling, ularga rem da o‘lchamlarni belgilaymiz:

div {
	font-size: 2rem; /* 32px ga mos keladi */
}
p {
	font-size: 2rem; /* 32px ga mos keladi */
	margin: 2rem;    /* 32px ga mos keladi */
}

Faraz qilaylik, bizda muammolarni hal qiladigan HTML kodi mavjud:

<main>
	<h1>sarlavha</h1>
	<section>
		<h2>sarlavha</h2>
		<p>
			matn
		</p>
		<p>
			matn
		</p>
	</section>
	<section>
		<h2>sarlavha</h2>
		<p>
			matn
		</p>
		<p>
			matn
		</p>
	</section>
</main>

Pikselda berilgan barcha birliklarni rem ga qayta yozing:

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