რა განსხვავებაა 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) ფონტის ზომა	უფრო პროგნოზირებადი	გლობალური ფონტების, მარჟებისა და ზომების სკალირება გვერდზე