Middle+

Ποια είναι η διαφορά μεταξύ rem και em;

sobes.tech AI

Απάντηση από AI

rem και em είναι σχετικές μονάδες μέτρησης στο CSS, που χρησιμοποιούνται για τον καθορισμό διαστάσεων, αλλά διαφέρουν στη βάση αναφοράς.

em — μια σχετική μονάδα που βασίζεται στο μέγεθος γραμματοσειράς του γονικού στοιχείου. Για παράδειγμα, αν το μέγεθος γραμματοσειράς του γονέα είναι: 16px, τότε 1em = 16px. Αν σε ένα παιδικό στοιχείο το μέγεθος γραμματοσειράς είναι: 1.5em, το μέγεθός του θα είναι 24px.
rem — μια σχετική μονάδα που βασίζεται στο μέγεθος γραμματοσειράς του ριζικού στοιχείου (συνήθως <html>). Για παράδειγμα, αν το <html> έχει μέγεθος γραμματοσειράς: 16px, τότε 1rem είναι πάντα ίσο με 16px, ανεξάρτητα από το nesting.

Βασική διαφορά:

το em εξαρτάται από το πλαίσιο (το γονικό στοιχείο), το οποίο μπορεί να οδηγήσει σε αλυσιδωτό πολλαπλασιασμό διαστάσεων κατά το nesting.
το rem είναι πάντα σταθερό σε σχέση με τη ρίζα, καθιστώντας τη διαχείριση διαστάσεων πιο απλή και προβλέψιμη.

Παράδειγμα:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px; /* 1em = 20px μέσα στο .parent */
}

.child-em {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}

.child-rem {
  font-size: 1.5rem; /* 1.5 * 16px = 24px */
}

Χρησιμοποιήστε rem για τις παγκόσμιες διαστάσεις για να αποφύγετε απρόβλεπτες αλλαγές, και em όταν θέλετε να κλιμακώσετε σε σχέση με το τοπικό πλαίσιο.

Προηγούμενος Επόμενο