TG Telegram Group & Channel
Frontend | Вопросы собесов | United States America (US)
Create: Update:

🤔 Чем em отличается от rem?

🟠Как работает `em`?
em зависит от размера шрифта родителя (font-size).

.parent {
font-size: 20px;
}

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


Но если .child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя.
.parent {
font-size: 20px;
}

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

.grandchild {
font-size: 2em; /* 2 * 30px = 60px */
}


🟠Как работает `rem`?
rem всегда зависит от font-size у <html>.
html {
font-size: 16px;
}

.container {
font-size: 2rem; /* 2 * 16px = 32px */
}


🟠Когда использовать `em`, а когда `rem`?
Используйте rem, если нужно, чтобы шрифты и размеры были предсказуемыми
Используйте em, если хотите, чтобы элементы зависели от родителя

Ставь 👍 и забирай 📚 Базу знаний

🤔 Чем em отличается от rem?

🟠Как работает `em`?
em зависит от размера шрифта родителя (font-size).
.parent {
font-size: 20px;
}

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


Но если .child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя.
.parent {
font-size: 20px;
}

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

.grandchild {
font-size: 2em; /* 2 * 30px = 60px */
}


🟠Как работает `rem`?
rem всегда зависит от font-size у <html>.
html {
font-size: 16px;
}

.container {
font-size: 2rem; /* 2 * 16px = 32px */
}


🟠Когда использовать `em`, а когда `rem`?
Используйте rem, если нужно, чтобы шрифты и размеры были предсказуемыми
Используйте em, если хотите, чтобы элементы зависели от родителя

Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM


>>Click here to continue<<

Frontend | Вопросы собесов




Share with your best friend
VIEW MORE

United States America Popular Telegram Group (US)