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.

Fontes

• https://tableless.com.br/unidade-pixels-em-rem/
• https://www.anicasagrande.com.br/o-que-sao-unidades-em-e-rem-em-css/
• https://imasters.com.br/css/unidades-css-relativas-rem-em-ch-ex-css3
• https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97