Ի՞նչն է տարբերությունը em և rem չափման միավորների միջև։

em միավորները հարաբերական են ծնողի տարրերի տառաչափի չափի հետ: Եթե ծնողի տառաչափի չափը բացահայտորեն սահմանված չէ, այն օգտագործում է իր սեփական ծնողի տառաչափը և այդպես շարունակ մինչև արմատային տարրը (html)։

rem միավորները հարաբերական են միայն արմատային տարրի (html) տառաչափի հետ։ Սա դարձնում է դրանք ավելի կանխատեսելի և պարզեցնում է տառատեսակների և չափերի կառավարմանը էջում:

Օրինակ՝

HTML:

<div class="parent">
  Ծնող տեքստ
  <div class="child-em">
    Երեխայի em տեքստ
  </div>
  <div class="child-rem">
    Երեխայի rem տեքստ
  </div>
</div>

CSS:

.parent {
  font-size: 16px; /* Հիմնական տառաչափը ծնողի համար */
}

.child-em {
  font-size: 1.5em; /* Տառաչափը 1.5 * 16px = 24px */
}

html {
  font-size: 10px; /* Հիմնական տառաչափը արմատային տարրի համար */
}

.child-rem {
  font-size: 2rem; /* Տառաչափը 2 * 10px = 20px */
}

Համեմատական աղյուսակ՝

Միավոր	Մեկնաբանություն	Նախատեսելիություն	Օգտագործում
em	Տառաչափի չափը ծնողի տարրից	Փոքր-ինչ ավելի անկանխատեսելի, կախված կոնտեքստից	Դիմակների և չափերի համար, որոնք կախված են ներսի տեքստից
rem	Տառաչափի չափը արմատային տարրից (html)	Ավելի կանխատեսելի	Գլոբալ տառատեսակների, մարգինների և չափերի համար էջում