Gostaria de saber um bom vídeo ou artigo explicativo sobre as principais diferenças entre essas duas unidades de medidas e quando usá-las, pois foi a parte que menos entendi ao longo dos cursos =/. Agradeço!
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Gostaria de saber um bom vídeo ou artigo explicativo sobre as principais diferenças entre essas duas unidades de medidas e quando usá-las, pois foi a parte que menos entendi ao longo dos cursos =/. Agradeço!
Talvez esse artigo possa te ajudar de forma descomplicada https://pingback.com/papodedev/css-rem-vs-em-vs-px-qual-usar
Mas basicamente a diferença é: REM pega o tamanho do font-size da tag HTML enquanto que o EM pega o tamanho do font-size da tag pai.
Exemplo:
<html style="font-size:20px">
<body>
<div style="font-size:10px">
<p id="id1" style="font-size:2rem">Texto 1</p>
<p id="id2" style="font-size:2em">Texto 2</p>
<p id="id3" style="font-size:40px">Texto de 40px</p>
<p id="id4" style="font-size:20px">Texto de 20px</p>
</div>
</body>
</html>O tamanho do texto em <p id="id1"> será de 2REM = 2*(font-size do HTML) = 2*20 = 40 px.
O tamanho do texto em <p id="id2"> será de 2EM = 2*(font-size do elemento pai) = 2*10 = 20 px.