Ainda não entendi a diferença entre rem e em, neste exercício https://cursos.alura.com.br/course/avancando-html-css/task/6115 não entendi de onde foram tiradas as medidas, se foram tiradas do body ou de outro elemento.
Ainda não entendi a diferença entre rem e em, neste exercício https://cursos.alura.com.br/course/avancando-html-css/task/6115 não entendi de onde foram tiradas as medidas, se foram tiradas do body ou de outro elemento.
Fala Eduardo, tudo bom?
A diferença entre EM e REM pode parecer complicado mas na verdade não é!
Veja o seguinte exemplo:
html:
<div id="primeira">
<div id="segunda"></div>
</div>css:
#primeira{
font-size: 10px;
}
#segunda{
font-size: 1em;
}No caso acima, eu defini que a fonte da div mais externa (primeira), tem tamanho 10px, logo depois, na div mais externa, apliquei um font-size de 1em. Nesse caso, esse em irá se basear no tamanho da fonte da div pai! (no caso, primeira) Ou seja, para a segunda div, 1em = 10 px, 2em = 20 px, e assim por diante! Dessa forma preservamos proporções!
Porém, nem sempre queremos nos basear no tamanho da fonte do elemento imediatamente acima. O rem, no caso, irá se basear na tag root do seu html, (tag html)!
Perceba como conseguimos manter proporções específicas utilizando essas unidades!
Sendo um pouco mais específico agora, o nome em, rem vem, na verdade da largura do caractere "M" (maiúsculo) na fonte e tamanho que está sendo utilizado (o r vem de "root").
Concluindo, o tamanho de 1 em ou rem varia de acordo com o tamanho da fonte e o tipo escolhido.
Espero ter ajudado, mas se ficou confuso ainda não hesite em postar!
Abraços e bons estudos!
Muito obrigado! consegui compreender muito melhor agora, agradeço muito!