DEV Community

Thales Maia
Thales Maia

Posted on • Updated on

[PT-BR] Unidades Relativas: rem e em

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

Top comments (0)