Unidades Relativas do CSS: 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 post irei focar apenas nas mais utilizadas, as unidades rem e em.

O Básico

Qual a diferença dessas unidades para a unidade px, a mais popular?

As unidades relativas (ou flexíveis) se adaptam automaticamente com o layout, se diferenciando das medidas padrões (como o px), que são absolutas.

Unidade rem

A unidade rem funciona da seguinte maneira: ela pega o valor que você colocar e multiplica pelo valor da propriedade font-size do root (que é o seletor html no css). O resultado será computado como px pelo browser.

html {
  font-size: 20px;
}

.exemplo {
  width: 5rem; /*5rem x 20px = 30px*/
}

Unidade em

A unidade em possui o mesmo cálculo da unidade rem, porém, sua lógica é diferente. Nesse caso, ele sempre pegará o valor do seu pai para realizar a multiplicação, ignorando o valor do root.

html {
  font-size: 20px;
}

body {
  font-size: 14px
}

.exemplo {
  width: 2em; /*2em x 14px = 28px*/
  height: 2em;
}

Conclusão

Na minha opinião, a unidade rem é muito mais fácil de se lidar e é muito útil pra quem deseja implementar um design responsivo. De tal forma, se você mudar o valor do font-size do root com a utilização de Media Queries, todo o seu layout irá se adaptar e se tornará muito mais responsivo do que se utilizasse as unidades absolutas, como o px.

Introdução

O Básico

Unidade rem

Unidade em

Conclusão

Fontes