Introdução
As unidades relativas de unidade (%, vh, vh, ch, rem, em e etc) são essenciais para quem quer criar um design responsivo para seu site. Neste artigo, irei focar apenas nas unidades rem e em.
O Básico
Qual a diferença dessas unidades para a mais famosa, o px?
As medidas flexíveis (ou relativas) se adaptam automaticamente com o layout, se diferenciando das medidas padrões (como o px), que são absolutas.
.primeiro-exemplo{
width: 30px;
height: 30px;
}
.segundo-exemplo{
width: 3rem;
height: 3rem;
}
.terceiro-exemplo{
width: 3em;
height: 3em;
}
OBS: As classes são div’s que se encontram dentro do elemento body.
Unidade rem
O que o rem faz de tão especial?
Ele pega o valor que você quer transformar (neste caso, 30px) e divide pelo valor da propriedade font-size do root (que é o seletor html no css).
html{
font-size: 20px;
}
.segundo-exemplo{
width: 1.5rem /*30px % 20px = 1.5*/
height: 1.5rem
}
Unidade em
O em possui o mesmo cálculo, mas, diferentemente do rem, ele sempre pegará o valor do seu pai.
html{
font-size: 20px;
}
body{
font-size: 16px
}
.terceiro-exemplo{
width: 1.8em /*30px % 16px = 1.8*/
height: 1.8em
}
Conclusão
Com isso, a unidade rem é muito mais fácil de se lidar. De tal forma, muitos desenvolvedores preferem usar ela para tudo (inclusive eu), como: definir o tamanho do margin, do padding e entre outras coisas. Portanto, se você mudar o valor do font-size do root através de Media Queries, todo o seu layout irá se adaptar e se tornará, assim, um site responsivo.
Top comments (0)