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 — когато трябва да мащабирате спрямо локалния контекст.

Предишни Следващият