Middle+

V čom sa líši rem od em?

sobes.tech AI

Odpoveď od AI

rem a em sú relatívne jednotky v CSS, ktoré sa používajú na určenie rozmerov, ale líšia sa v základnej referenčnej báze.

em — relatívna jednotka založená na veľkosti písma rodičovského prvku. Napríklad, ak je veľkosť písma rodiča: 16px, potom 1em = 16px. Ak v dieťatom prvku je veľkosť písma: 1.5em, jeho veľkosť bude 24px.
rem — relatívna jednotka založená na veľkosti písma koreňového prvku (zvyčajne <html>). Napríklad, ak <html> má veľkosť písma: 16px, potom 1rem je vždy rovný 16px, bez ohľadu na vnoženie.

Hlavný rozdiel:

em závisí od kontextu (od rodičovského prvku), čo môže viesť k reťazovému násobeniu veľkostí pri vnožení.
rem je vždy pevné voči koreňu, čo uľahčuje správu veľkostí a robí ich predvídateľnejšími.

Príklad:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px; /* 1em = 20px vo vnútri .parent */
}

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

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

Používajte rem pre globálne veľkosti, aby ste predišli neočakávaným zmenám, a em, keď chcete škálovať vzhľadom na lokálny kontext.

Predchádzajúce Ďalej