What units of measurement do you use when editing?

Question

css

A little background: for 3 years I did not approach the computer to make up from the word at all, because I was on maternity leave and I was sure that I would not do this business again. But when the question of work arose, I realized that web development still attracts me. Now I'm trying to enter into the changes that have occurred during my long vacation.
And I actually noticed that many people use em and rem. Of course, I use px or % in the old fashioned way. Tell me where to figure out what is right to apply and in what cases? And how to work with these em / rem? Constantly counting on a calculator? or i dont understand something

Answer 1

What units of measurement do you use when editing?

1. Размер шрифта удобно писать в px, em и rem.
Если он фиксированный, то это px.
Если зависит от настроек пользователя, то rem. Для html задают font-size: 62.5%, для body font-size: 1.6rem в итоге для стандартных настроек получают изначальные 16px, но для удобства расчетов в этом случае 1rem=10px.
Если размер шрифта зависит от размера шрифта родителя, то используют em, например, заголовок должен быть в 1.2 раза крупнее текста. h1{font-size: 1.2em}
А может быть мне нужен адаптивный шрифт, чтобы на всех экранах слово занимало всю ширину, тогда vw vh
2. Границы. Обычно толщина границ не зависит от шрифта или размеров блоков, значит, px
border: 1px
3. Блоки.
У блоков могут быть разные зависимости.
Например, четверть родителя -> проценты %
Или фиксированная -> px
Или зависит от ширины/высоты вьюпорта -> vw vh
Или зависит от шрифта -> ch (Ширина символа 0 в шрифте текущего элемента.)
4. Отступы.
Могут зависеть от шрифта, могут быть % от ширины блока или фиксированными в px.
Это не все варианты, все мне, наверное, так сразу и не перечислить

Answer 2

I never bother at all and always use only px and %, no problems arise, already 7 years :)

Answer 3

html {font-size: 62.5%;}
h1 {font-size: 2.4rem;}
p {font-size: 1.4rem;}

Answer 4

Rem is recommended for adaptive. They are also easy to use, unlike em, where you have to remember the value of the parent in your head. Of course one gets confused. And with rem, everything is simple:

html { 
    font-size: 100% /* =16px */
}
body {
    font-size: 1rem; /* =16px */
}

Answer 5

If you work with sass bootstrap 4, then you should already work with rem, because there are calculations going on with them