CSS හි rem ඒකක

em ඒකක සැමවිටම පහසු නොවේ. ගැටළුව එයයි, එක් ටැගයක අකුරු ප්‍රමාණය වෙනස් කළහොත්, එය එහි පරම්පරා ටැග සඳහාද වෙනස් වේ, ඒවායේ ප්‍රමාණය ගණනය කරන්නේ ඒවායට සාපේක්ෂව එය.

එමනිසා rem ඒකක හඳුන්වා දෙන ලදී. මෙම ඒකකවල අගයන් සැමවිටම ගණනය කරනු ලබන්නේ html ටැගය සඳහා සකසා ඇති අකුරු ප්‍රමාණයට සාපේක්ෂව.

ඔබ දැනටමත් දන්නා පරිදි, පෙරනිමියෙන් මෙම අගය සමාන වන්නේ 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;
}