Middle+

Kā atšķiras rem no em?

sobes.tech AI

Atbilde no AI

rem un em ir ir relatīvās mērvienības CSS, kas tiek izmantotas izmēru noteikšanai, bet atšķiras pēc atsauces pamata.

em — relatīva vienība, kas balstīta uz vecāka elementa fonta lielumu. Piemēram, ja vecāka elementa fonta lielums ir: 16px, tad 1em = 16px. Ja bērna elementā fonta lielums ir: 1.5em, tā izmērs būs 24px.
rem — relatīva vienība, kas balstīta uz saknes elementa (parasti <html>) fonta lielumu. Piemēram, ja <html> ir fonta lielums: 16px, tad 1rem vienmēr ir vienāds ar 16px, neatkarīgi no ielikšanas līmeņa.

Galvenā atšķirība:

em ir atkarīgs no konteksta (no vecāka elementa), kas var novest pie ķēdveida izmēru reizināšanas ielikšanas laikā.
rem vienmēr ir fiksēts attiecībā pret sakni, kas atvieglo izmēru pārvaldību un padara tos prognozējamākus.

Piemērs:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px; /* 1em = 20px `.parent` iekšienē */
}

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

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

Izmantojiet rem globālajiem izmēriem, lai izvairītos no neparedzētām izmaiņām, un em, kad vēlaties mērogot attiecībā uz vietējo kontekstu.

Iepriekšējais Tālāk