Middle+

Mi a különbség a rem és az em között?

sobes.tech MI

Válasz az MI-től

a rem és az em relatív mértékegységek a CSS-ben, amelyeket méretek meghatározására használnak, de különböznek a referenciaalapjukban.

em — egy relatív egység, amely a szülő elem betűméretén alapul. Például, ha a szülő font mérete: 16px, akkor 1em = 16px. Ha egy gyermek elemben a font mérete: 1.5em, akkor a mérete 24px lesz.
rem — egy relatív egység, amely a gyökér elem (általában <html>) betűméretén alapul. Például, ha a <html> betűmérete: 16px, akkor 1rem mindig 16px, függetlenül a beágyazástól.

Fő különbség:

az em a kontextustól (a szülőtől) függ, ami láncolt szorzáshoz vezethet a méretekben a beágyazás során.
a rem mindig fix a gyökérhez képest, ami egyszerűsíti a méretek kezelését és előrejelezhetőbbé teszi azokat.

Példa:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px; /* 1em = 20px a .parent belsejében */
}

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

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

Használja a rem-et globális méretekhez, hogy elkerülje a váratlan változásokat, és az em-et, ha a helyi kontextushoz képest szeretne skálázni.

Korábbi Következő