Pixel, Rem ou Em: Qual a melhor escolha ?
Published: 2023-09-18 23:34:10

Uma das primeiras coisas que aprendemos quando começamos a estudar desenvolvimento Web, são os conceitos de CSS e dentro dessa área, as medidas que vamos usar nos nossos projetos. Quando paramos para pensar nisso, é normal que surjam dúvidas? Afinal de contas qual é a melhor escolha para quem só tinha ouvido falar de **pixel** até então?
Como devorador de vídeos, tutoriais, entre outros, os instrutores sempre variavam nas medidas, uns usavam **_pixel_**, outros **_rem_**, e alguns raros falavam de **_em_**. Logo fiquei sem saber qual usar quando decidi fazer meus projetos pessoais. Então, para ajudar aqueles que também estão passando por esse problema, decidi passar algumas dicas.  

## Primeiro, o que é pixel?##

A primeira coisa que precisamos saber é que o pixel que usamos em desenvolvimento web **_não é_** a mesma coisa que o pixel físico. No **CSS**, o pixel é uma referência que mede o tamanho de um pixel em uma tela de 96dpi. Quando usamos essa medida em um projeto, o valor determinado é reescalonado para sua unidade de referência. 

##Agora vamos falar sobre REM##

Não, não estamos falando da saudosa banda REM. Aqui vamos tratar sobre uma unidade relativa e escalável de medida que varia de acordo com seu valor determinado no **Root(raíz)** do seu projeto. Geralmente definimos o valor REM como sendo o equivalente a 62.5% do tamanho de um pixel. Dessa forma se o tamanho do pixel for definido como 16px, essa mesma medida transformada para rem será igual 1rem. Logo temos **1rem = 10px**.
Mas por quê usar o rem? Por padrão, a fonte raiz dos navegadores vem estipulados como 16px. Quando formos redimensionar essa fonte, se ela não estiver como Rem, vai ficar distorcida se aumentada. Quando usamos a medida rem, essa fonte será redimensionada de maneira adequada. 

##E o EM?##
o **em** também é uma unidade dinâmica, mas a sua referência não vai ser o valor estipulado na raíz do seu navegador. Ele vai tomar como referência o **_font-size_** do elemento no qual ele é utilizado. Um exemplo simples é se utilizarmos um elemento com font-size de 1rem(o que seria 16px de acordo com o valor padrão do root). Ao utilizarmos no elemento filho algo com a fonte 1em, ele manterá o valor de 16px, já que está referenciando o pai. 

##Certo, mas e quando devo usar cada um?##

Nada melhor do que saber quando usar cada medida, depois que entendemos cada uma delas. E aqui vai algumas dicas:

**_Pixel_**: A melhor maneira, seria utilizar em ajustes finos, partes que não seriam alteradas ao serem reescalonadas. Dessa forma quando alterado o root do seu navegador seu layout continuará perfeito. 

**_Rem_**: Essa medida geralmente é usada no projeto inteiro, porque ela é ótima para mantê-lo acessível e adaptável. Existem inúmeras ferramentas que ajudam a fazer a conversão de pixel para rem, mas em resumo a melhor maneira é fazer o cálculo que o rem é 62.5% da fonte padrão de um pixel. Logo: **1rem/10px; 2rem/20px; 4.5rem/45px** e assim por diante.

**_Em_**: Para se utilizar em preenchimentos, alturas de linhas e margens é uma ótima alternativa.

Vimos quais as diferenças entre as medidas e quando utilizarmos cada uma delas. Mas a melhor maneira de sabermos é praticando. Tente utilizar as 3 medidas no mesmo projeto, variando entre elas e veja como se comportam. Aproveite para deixar aqui nos comentários qual você mais gosta e como elas melhor se encaixam nos seus projetos.