Conterver PX em Porcentagem

Para transformar valores em pixel (px) para porcentagem (%), você deve multiplicar o valor em pixel por 6,25, o resultado será o valor em %.

A multiplicação por 6,25 é feita pois 1 pixel equivale a 6,25%, veja um exemplo

12px x 6,25 = 75%;

Um pouco mais abaixo você tem à disposição uma tabela de conversão onde listamos alguns valores de pixel convertidos para %.

O formato porcentagem é um formato relativo, igual ao formato rem, ele se adapta aos tamanhos com base no padrão do navegador, nos exemplos que usamos no converter px em rem e no converter rem em px, abordamos exemplos de tamanho da fonte, mas dessa vez vamos usar exemplos com tamanho de divs, vejamos então na prática:

Criaremos abaixo duas divs, uma com 300px e outra com 35,1% de largura (width). Se você estiver acessando esta página pelo computador e com janela maximizada, provavelmente ambas as divs estão mostrando com o mesmo tamanho.

Agora vem a mágica, restaure o tamanho da janela do seu navegador, deixando ele menor, ao fazer isto você irá perceber que as divs agora não possuem o mesmo tamanho, isto é justamente o que falamos acima, o tamanho relativo, enquanto em px o tamanho permanece o mesmo, em % ele vai se adaptando ao tamanho da janela, legal né?

Agora, se você é uma pessoa curiosa deve ter ficado com a pulga atrás da orelha, afinal, se converter 300px em %, o resultado vai ser 1.875%, e não 35,1. 🤯 Isto acontece pois o padrão em questão esta relacionado ao tamanho de fonte, quando aplicamos para tamanhos de objetos, como uma div ou imagem, esta relação de conversão que usamos aqui na página não se aplica.

Espero que tenha ficado mais claro para você a diferença entre px e %, desta forma você pode adotar qual o melhor formato usar em seus projetos, e como prometido, vamos de lista de conversão com alguns valores em px convertidos em %: