As páginas web para serem responsivas precisam ter tamanhos em EM e REM? Teria algum problema se todas as páginas fosse em px, %?
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!
As páginas web para serem responsivas precisam ter tamanhos em EM e REM? Teria algum problema se todas as páginas fosse em px, %?
Oi, Fredson, tudo bem?
Não necessariamente, as medidas em e rem ajudam nesse processo de responsividade por serem flexíveis. As várias medidas no CSS tem as suas funções diferentes. Vamos as suas funções:
O REM irá se basear pelo valor da tag html, ou seja, à raíz do arquivo html. E esse R* em *rem significa root que por sua vez significa raíz. Vamos a um pequeno exemplo:
<html>
<div class="primeira_div">
<div class="segunda_div">
<h1 class="text";">Olá, Mundo!</h1>
</div>
</div>
</html>html{
font-size: 10px;
}
.primeira_div{
font-size: 5px;
}
.segunda_div{
font-size: 2rem;
}
.text{
font-size: 4rem;
}O que temos no código acima: .primeira_div -> 5px; .segunda_div -> 102 = 20px .text -> 104=40px;
Agora vamos ao EM, que diferente do REM segue o elemento-pai e não à tag html
<div class="primeira_div">
<div class="segunda_div">
<h1 class="text";">Olá, Mundo!</h1>
</div>
</div>.primeira_div{
font-size: 5px;
}
.segunda_div{
font-size: 2em;
}
.text{
font-size: 4em;
}O EM acompanha os valores do elemento pai, o que vai acontecer acima é: .primeira_div -> 5px; .segunda_div -> 52 = 10px .text -> 104=40px;
A gente percebe que o EM tem um efeito cascata que nada mais é essa multiplicação a partir dos valores do pai.
Voltando à responsividade, ambas são flexíveis e ajudam num design responsivo. Mas para ter reposnsividade com essas medidas, principamente a REM precisa adaptar as páginas a suas respectivas media queries. Portanto, se o tamanho da fonte que tá no html não muda, o REM não será responsivo.
Então, depende de como você está elaborando a estilização do CSS. Uma formatação com px pode ser mais responsivo do que com REM. Essa resposta do Sergio é interessante sobre o uso de cada medida: https://cursos.alura.com.br/forum/topico-quando-usar-as-medidas-px-em-rem-ch-21750
Espero ter te ajudado!