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 колдонуп, жергиликтүү контекстке салыштырмалуу масштабдоо үчүн.

Мурунку Кийинки