Solucionado
qual seria as situações que é comum usar essa medidas ? como um exemplo teórico, tenho um padding ou margin de uma certa tag será que devo usar um rem ou em será que devo usar rem no padding invés de usar no margin, certa duvida que possa surgi na hora de implementa no css de algum projeto.
A medida de fonte, por padrão é medida em Pixel, porem ao setar uma fonte em pixel, estamos definindo que aquela fonte tem tamanho estático! Para corrigir isso utilizamos o padrão EM e REM.
Qual o problema em ter tamanho fixos? Por exemplo quando damos zoom na página, o que estiver configurado com pixels não muda.
A diferença entre EM e REM é simples de se entender e complexo de se aplicar.
REM - é calculado em cima do valor da TAG Body, Html ou Navegador.
EM - já utiliza no cálculo o valor do elemento pai, criando uma hierarquia no cálculo, tornando mais complexo o uso.
EX rem >>>
html { font-size: 14px; //Tamanho da fonte na raiz }
div { font-size: 1.2rem; //Aqui o valor é 16.8px, pois 14*1.2 = 16.8 }
Ex em
100% = 1em = tamanho definido e 125% = 1.25em = 1.25*tamanho definido
é só repetiu as explicações que foi ditas antes ...
Oi Wesley, tudo bem?
Basicamente você vai usar o reme 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.