Ποια είναι η διαφορά μεταξύ των μονάδων μέτρησης 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)	Πιο προβλέψιμο	Για παγκόσμια κλιμάκωση γραμματοσειρών, περιθωρίων και μεγεθών στοιχείων στη σελίδα