Middle+

Mis vahe on rem ja em vahel?

sobes.tech AI

Vastus AI-lt

rem ja em on suhtelised mõõtühikud CSS-is, mida kasutatakse suuruste määramiseks, kuid erinevad lähtestuspõhja poolest.

em — suhteline ühik, mis põhineb vanema elemendi fondi suurusel. Näiteks, kui vanema fondi suurus on: 16px, siis 1em = 16px. Kui lapse elemendi fondi suurus on: 1.5em, siis selle suurus on 24px.
rem — suhteline ühik, mis põhineb juureelemendi (tavaliselt <html>) fondi suurusel. Näiteks, kui <html>-l on fondi suurus: 16px, siis 1rem on alati võrdne 16px-ga, sõltumata pesastusest.

Peamine erinevus:

em sõltub kontekstist (vanemast), mis võib põhjustada suuruste ahelalise korrutamise pesastuse ajal.
rem on alati fikseeritud juure suhtes, mis lihtsustab suuruste haldamist ja muudab need prognoositavamaks.

Näide:

html {
  font-size: 16px;
}

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

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

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

Kasuta rem-i globaalsete suuruste jaoks, et vältida ootamatuid muutusi, ja em-i, kui soovid skaleerida lokaalse konteksti suhtes.

Eelmine Edasi