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

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

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

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

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

cssdiv {
  font-size: 20px;
}

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

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

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

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

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

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

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

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

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

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

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

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