Middle+

фарқияти байни rem ва em чист?

sobes.tech AI

Ҷавоб аз AI

rem ва em дар CSS воҳидҳои нисбӣ мебошанд, ки барои муайян кардани андозаҳо истифода мешаванд, аммо дар асоси такягоҳ фарқ мекунанд.

em — воҳиди нисбӣ, ки ба андозаи ҳарфи унсури падар асос ёфтааст. Масалан, агар андозаи ҳарфи падар: 16px бошад, пас 1em = 16px. Агар дар унсури кӯдак андозаи ҳарф: 1.5em бошад, андозаи он 24px хоҳад буд.
rem — воҳиди нисбӣ, ки ба андозаи ҳарфи унсури реша (одатан <html>) асос ёфтааст. Масалан, агар <html> андозаи ҳарф: 16px дошта бошад, пас 1rem ҳамеша баробар ба 16px аст, новобаста аз даргирӣ.

Фарқи асосӣ:

em аз контекст (аз унсури падар) вобаста аст, ки метавонад ба зиёдшавии зилзилавии андозаҳо дар даргирӣ оварда расонад.
rem ҳамеша дар нисбати реша устувор аст, ки идоракунии андозаҳоро содда мекунад ва онҳоро пешгӯишаванда мегардонад.

Масалан:

html {
  font-size: 16px;
}

.parent {
  font-size: 20px; /* 1em = 20px дар дохили .parent */
}

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

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

Барои андозаҳои глобалӣ rem-ро истифода баред, то тағиротҳои ғайр интизорро пешгирӣ кунед, ва em-ро вақте истифода баред, ки мехоҳед дар нисбати контексти маҳаллӣ андозагирӣ кунед.

Гузашта Оянда