Middle+

Kuo skiriasi rem nuo em?

sobes.tech AI

Atsakymas iš AI

rem ir em yra santykiniai matavimo vienetai CSS, kurie naudojami dydžių nustatymui, tačiau skiriasi pagal atskaitos pagrindą.

em — santykinis vienetas, pagrįstas tėvinio elemento šrifto dydžiu. Pavyzdžiui, jei tėvinio elemento šrifto dydis yra: 16px, tada 1em = 16px. Jei vaikų elemento šrifto dydis yra: 1.5em, jo dydis bus 24px.
rem — santykinis vienetas, pagrįstas šaknies elemento (dažniausiai <html>) šrifto dydžiu. Pavyzdžiui, jei <html> turi šrifto dydį: 16px, tada 1rem visada yra lygus 16px, nepriklausomai nuo įdėjimo.

Pagrindinis skirtumas:

em priklauso nuo konteksto (nuo tėvinio elemento), kas gali sukelti grandininį dydžių daugybinimą įdėjimo metu.
rem visada yra fiksuotas pagal šaknį, tai palengvina dydžių valdymą ir daro juos labiau prognozuojamus.

Pavyzdys:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px; /* 1em = 20px `.parent` viduje */
}

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

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

Naudokite rem globaliems dydžiams, kad išvengtumėte netikėtų pokyčių, ir em, kai norite mastelio pagal vietinį kontekstą.

Ankstesnis Kitas