Galerinha, estou realmente em dúvida em quando usar um dos dois!
Pelo que eu entendi o em tem um efeito cascata dos "pais". Mas, parece que sempre o rem se encaixa melhor no meu código.
Poderiam me explicar?
Solucionado
Galerinha, estou realmente em dúvida em quando usar um dos dois!
Pelo que eu entendi o em tem um efeito cascata dos "pais". Mas, parece que sempre o rem se encaixa melhor no meu código.
Poderiam me explicar?
Boa noite, Allan. O em tem como base o elemento pai. Já o rem utiliza como base o elemento pai de todos, o "r" deriva justamente de root. Exemplo:
<body>
<div>
<h1></h1>
<p></p>
</div>
</body>em, h1 e p utilizarão as medidas de div como referência. rem, h1 e p utilizarão o elemento "root" que é o body.
Espero que tenha dado uma esclarecida. Dê uma olhada nesse texto do Tableless. É uma boa referência. Abraço!
Rodrigo, eu já havia visto esse site. Mas, obrigado!
Só que o que eu quero saber, é em qual situação o em se encaixa melhor!
Assim como o rem, em qual situação seria melhor utiliza-lo!
Porque se você abaixar um pouco do em ele terá o mesmo resultado que o rem.
Por exemplo. No meu código com em ficaria assim:
.tituloPrincipalIndex{
text-align:center;
background-color:#851944;
border-bottom:0.525em solid black;rem:
.tituloPrincipalIndex{
text-align:center;
background-color:#851944;
border-bottom:0.625rem solid black;Se souber responder agradeço! :)
Isso depende da sua intenção com o elemento no momento.
Como o em usa a DIV pai para tirar sua medida, você pode definir uma medida de fonte na DIV e usar a medida em para controlar ela.
Com o rem (root em) você só precisaria controlar o tamanho no body.
Se a pergunta é qual situação é melhor utilizá-lo, a resposta é: depende.
Mas se a pergunta é qual vai melhorar a legibilidade, tamanho e eficiência do seu CSS: rem sempre.
Por que? Porque usando o rem você não precisa ficar repetindo tamanho de fonte em todas as divs que você quiser um tamanho diferente, pois se você deu uma lida no que nosso amigo mandou, tanto em quando rem usam o tamanho da fonte como referência.
Na prática:
usando em
<body>
<div class="container">
<h1 class="tituloPrincipal"></h1>
<p></p>
</div>
</body>O CSS :
body {
font-size: 20px //aqui o em está usando este valor para referência ;
}
.container {
font-size:18px; // agora eu mudo a medida aqui pra basear a em nele
}
.tituloPrincipal{
text-align:center;
background-color:#851944;
border-bottom:0.525em solid black;O mesmo HTML, mas CSS com 'root em' :
body {
font-size: 20px //aqui o em está usando este valor para referência ;
}
.tituloPrincipal{
text-align:center;
background-color:#851944;
border-bottom:0.625em solid black;
}
// perceba que você só precisa mudar a medida do elemento em si, não do pai, já que ele pega a base do font-size de bodyEvidentemente, isso fica a cargo do freguês, mas se for pra deixar seu CSS mais legível e menor, o que é muito importante, use REM, pois você declara a medida base apenas uma vez
Espero ter ajudado