Oi Wesley, tudo bem?
Basicamente você vai usar o rem
e em
quando você quiser deixar mais fácil o seu trabalho para quando for tornar seu projeto responsivo, ou seja, quando quiser que ele se adapte para vários tamanhos de telas diferentes.
Quando você usa uma fonte em tamanho de px
, está dizendo que ela vai ter sempre o tamanho estático.
Imagina que você está trabalhando num projeto enorme e usou tudo em px
para o layout mobile mas agora quer adaptar ele para desktop, você terá que mudar para rem ou em para que isso seja mais fácil de se fazer.
Ou um usuário que tem baixa visão precisar dar zoom pra enxergar melhor, mas você utilizou apenas px
então o tamanho não vai aumentar, e isso pode ser considerado um problema de acessibilidade.
Mas vamos lá: EM OU REM?
Normalmente, o tamanho padrão para 1em
é de 16px
. Então, 2em
seria 32px
(já que 16 x 2 = 32), e seguindo.
Dito isto, se determinarmos font-size: 16px
no <html>
do nosso projeto, e colocarmos font-size: 2em
em uma <section>
, ele será de 32px, como ja vimos, certo? Tudo ok, mas aí vem um problema: se definirmos font-size: 2em
de novo, so que dessa vez para uma <ul>
dentro desta <section>
, ele será de64px
, que é o dobro do dobro. Então, essa situação pode se tornar inconsistente e super complexo em um projeto grande, porque em sempre é uma unidade relativa ao elemento mãe.
Para resolver esse problema veio o REM!
Ao determinarmos na raiz do nosso projeto font-size: 14px, 1rem
sempre será 14px
em qualquer elemento, assim corrigimos problema do em com elementos filhos, veja:
html {
font-size: 14px;
}
/*
Aqui definimos font-size na raiz. É um padrão o valor ser de 16px, mas podemos colocar o valor que desejarmos.
*/
section {
font-size: 2rem;
}
/*
O que vai acontecer? A section vai ter um font-size de 28px, já que (14 x 2 = 28).
*/
ul {
font-size: 2rem;
}
/*
Se usarmos rem ao invés de em, o font-size da ul que tá dentro da section também será 28px, e não 56px.
*/
Legal né?
Espero que agora você tenha entendido e mil desculpas pela demora, estou refazendo esse curso e passando pelo fórum para ver se tem dúvidas ainda em aberto.
Bons estudos.