CSS හි em ඒකක හැඳින්වීම

em ඒකක මව් අංගයේ අකුරු මාපකයේ සියයට වශයෙන් අකුරු මාපකය නියම කිරීමට ඉඩ සලසයි. අපි උදාහරණයක් බලමු.

අපට සම්බන්ධීකරණය වූ ටැග් පහත පරිදි ඇතැයි සිතමු:

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

අපගේ div ට අකුරු මාපකය නියම කරමු:

div {
	font-size: 20px;
}

ප්‍රකරණයට 2em වශයෙන් අකුරු මාපකය නියම කරමු. මෙම අගය මව් අංගයේ අකුරු මාපකයට වඩා දෙගුණයක් වන අකුරු මාපකයකට අනුරූප වේ:

p {
	font-size: 2em; /* 40px ට අනුරූප වේ */
}

දැන් ප්‍රකරණයට 0.5em වශයෙන් අකුරු මාපකය නියම කරමු. මෙම අගය මව් අංගයේ අකුරු මාපකයෙන් අඩකට අනුරූප වේ:

p {
	font-size: 0.5em; /* 10px ට අනුරූප වේ */
}

1em අගය ප්‍රකරණයේ අකුරු මාපකය මව් div එකේ අකුරු මාපකයට සමාන කරයි:

p {
	font-size: 1em; /* 20px ට අනුරූප වේ */
}

ප්‍රායෝගික කාර්යයන්

අපට HTML කේතයක් ඇතැයි සිතමු, ඒ සඳහා අපි කාර්යයන් විසඳන්නෙමු:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

පහත කේතය ක්‍රියාත්මක වීමේ ප්‍රතිඵලයක් වශයෙන් li ටැග් වලට px වලින් ඇති වන අකුරු මාපකය තීරණය කරන්න:

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}