CSS REM vs EM vs PX qual usar?

Não é de hoje que CSS é famoso por causar algumas dores de cabeça 😂

Porém, uma dúvida que eu também tinha durante um bom tempo é, qual a diferença entre EM, REM e PX? 

Vamos tirar essas dúvidas, agora! 🙋🏼‍♀️

Bom primeiro vamos entender os grupos de medidas no CSS:

• Relativas (EM e REM)
• Absolutas (px)

O que isso quer dizer?

As medidas absolutas são fixas, não dependem de mais nada. Por exemplo font-size: 16px será 16px sempre. 

As medidas relativas dependem de alguma outra medida.

REM VS EM:

Então vamos a diferença entre REM e EM:

REM

 Relativo ao font-size declarado no elemento HTML. Por default nos navegadores o padrão é 16px.

REM é relativo ao font-size declarado no elemento html

EM

EM - Relativo ao font-size da sua classe pai. Podemos ter o mesmo elemento se comportando de modo diferente. Como no exemplo abaixo ⬇️

Nesse caso, usando em o elemento H1 se comporta diferente dependendo de quem é a classe pai.

Problema do EM

O em tem um problema que pode ser representado na imagem abaixo. Quando atribuímos para a div o font-size: 2em e temos uma div dentro da outra, o que acontece?

A primeira div => É em relação ao elemento pai (body), então: 2*10px = 20px

A segunda div => É em relação ao elemento pai (primeira div), então: 2*20px = 40px

A terceira div => É em relação ao elemento pai (terceira div), então: 2*40px = 80px

É fácil acabar cometendo algum erro indesejado. Por isso é um pouco mais difícil de trabalhar com o EM.

PX ou REM? 

Pra mim, esse post se resume a essa pergunta! 😂 Apesar de termos demorado um pouco pra chegar até aqui 

Zoom:

Podemos ver que os dois textos se comportam do mesmo jeito usando o zoom do navegador

Preferências do usuário:

Nos navegadores é possível escolher o tamanho padrão da fonte, que é 16px por padrão.

O que acontece, se o usuário muda o padrão das fontes do navegador, as vezes por algum problema de visão ou alguma outra razão?

O texto usando REM começa com o padrão do usuário e ao dar zoom, aumenta proporcionalmente igual o px.

Não sei se mencionei, mas o rem não é usado só em font-size. Podemos usar ele em todas as medidas (padding, margin, width..), inclusive para declarar o tamanho de um elemento.

A div esquerda tem seu width e height em rem. A div da direita tem o width e height em px.

Nesse exemplo o font-size do navegador estava como 24px e por isso a div da esquerda teve seu tamanho aumentado enquanto a da direita manteve o tamanho original.

Ok, mas é muito ruim calcular os valores toda vez pra usar REM. Temos uma solução para seus problemas

html { font-size: 62.5%;}
body { font-size: 1.4rem; } /* = 14px*/
h1 { font-size: 1.6rem; } /* = 16px*/

Resumindo

• A maioria dos usuários usa o zoom ao invés de trocar o font-size porque é muito mais fácil de acessar.
  
• O zoom escala o px e rem da mesma maneira

• Use em quando os elementos devem ser escalados baseado em algum outro elemento que não o html.
• Use rem quando os elementos devem ser escalados baseado nas preferências do usuário
• O uso do rem faz sua aplicação dar suporte a ACESSIBILIDADE 

Fontes:

• https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/?ref=heydesigner
• https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984