rem & em - unidades de medidas relativas
Olá colegas e estudantes da DIO! Hoje quero ajudar você a aprender, ou a relembrar, sobre as unidades de medidas relativas 'em' e 'rem'. Muito úteis quando o assunto é estilizção de páginas web.
🖌️ em
Usa como referência o font-size do elemento pai para definir o tamanho da fonte de um elemento. O valor passado multiplica o valor de font-size do elemento pai. Se o tamanho da fonte for de 20px do elemento pai, o elemento filho terá a fonte de 40px.
Se for utilizado para outra propriedade, o resultado estará relacionado ao tamanho da fonte do próprio elemento. Se o elemento tem uma fonte de 30px, e a largura receber o valor de 10rem, a largura total será de 30px (vide imagem).
🖍️ rem
É semelhante ao ‘em’, só que ‘rem’ sempre vai usar como referência o tamanho da fonte do elemento raiz, que no caso é a tag <html>. Geralmente os navegadores tem a fonte de 16px. Não importa quantos elementos vai haver um dentro do outro, ‘rem’ sempre vai se basear no tamanho do elemento raiz (vide imagem).
Ambas as unidades têm vantagens como: fácil manutenção, responsividade e controle de escala pelos navegadores. Entretanto, a unidade ‘rem’ acaba sendo a mais usada, devido ao fato do seu comportamento ser mais previsível do que ‘em’.
🧠o CSS trabalha com outras unidades de medidas relativas além dessas. São elas: porcentagem, vw, vh, ex e ch.
“Levanto os meus olhos para os montes e pergunto: De onde me vem o socorro? O meu socorro vem do Senhor, que fez os céus e a terra.”
Salmo 121.1-2
