Para que serve o conversor de px para rem e em
Este conversor transforma valores em pixel (px) em rem e em, e faz o caminho inverso também. Você pode digitar um valor em qualquer uma das três unidades — px, rem ou em — e o próprio conversor calcula e mostra os valores equivalentes nas outras duas, sem que você precise fazer a conta manualmente. Além disso, é possível definir um tamanho de fonte raiz personalizado e um tamanho de fonte de contexto para em, de modo que as conversões reflitam exatamente as configurações do seu projeto.
Os campos de entrada e como os valores se atualizam
A tela tem três campos principais: "Tamanho da fonte raiz (px)", "tamanho da fonte de contexto em em (px)" e "Valores". Quando você edita o campo de px, de rem ou de em dentro de "Valores", os outros dois são recalculados enquanto você digita — não é preciso apertar nenhum botão de confirmar. A própria interface resume esse comportamento assim: "Insira um valor em px, rem ou em — os outros dois serão atualizados enquanto você digita."
Os resultados exibidos incluem o tamanho de fonte raiz definido por você, o tamanho de fonte de contexto definido por você e os valores convertidos entre as três unidades.
O tamanho da fonte raiz (px) e o cálculo do rem
O campo "Tamanho da fonte raiz (px)" representa o tamanho de fonte base da página, em pixels. Por padrão, ele vem preenchido com 16px, e nesse ponto de partida 16px equivale a 1rem e também a 1em. Se o seu projeto usa uma fonte raiz diferente de 16px, é só trocar o valor desse campo para que os resultados em rem passem a refletir a base real do seu CSS. O tamanho da fonte raiz precisa ser um número maior que 0.
O tamanho da fonte de contexto em em (px) e o cálculo do em
Diferente do rem, que sempre se baseia na raiz da página, o em depende do tamanho de fonte do elemento onde ele é usado. É para isso que existe o campo "tamanho da fonte de contexto em em (px)": nele você informa o tamanho de fonte, em pixels, do elemento específico que está estilizando, e o conversor usa esse número para calcular o em correspondente. Assim como o campo de fonte raiz, ele também vem com 16px como padrão e precisa ser um número maior que 0.
Valores negativos e mensagens de erro
O campo "Valores" aceita números negativos em px, então é possível converter, por exemplo, um deslocamento negativo usado em margens ou posicionamento. Já os campos de tamanho de fonte raiz e de contexto em em não aceitam zero nem números negativos — eles precisam ser sempre maiores que 0.
Quando algum campo recebe um valor inválido, o conversor mostra uma mensagem específica. Se o problema estiver em "Valores", aparece "Insira um número para converter." Se for no tamanho da fonte raiz, aparece "O tamanho da fonte raiz deve ser um número maior que 0." E se for no tamanho da fonte de contexto em em, aparece "O tamanho da fonte de contexto em em deve ser um número maior que 0."
A tabela de conversões comuns e o processamento no navegador
Abaixo dos campos de conversão, o conversor traz a seção "Conversões comuns de px → rem (base de 16px)", uma tabela que já mostra valores de pixel usuais convertidos para rem, partindo de uma fonte raiz de 16px — útil como referência rápida mesmo que você não tenha digitado nada ainda nos campos principais.
Todo o cálculo acontece no seu navegador: cada conversão roda localmente, e nada do que você digita nos campos de fonte raiz, de contexto ou de valores é enviado para o BroBroGo.
Quem costuma usar este conversor
Este conversor serve para quem precisa transformar valores fixos em pixel em unidades relativas, como rem ou em, ao montar um layout responsivo. Também ajuda quem quer entender como diferentes tamanhos de fonte raiz mudam os valores em rem, quem precisa calcular o em a partir do tamanho de fonte de um elemento específico, e quem quer garantir que os tamanhos do seu site continuem proporcionais quando o leitor altera o tamanho de fonte padrão do navegador.
Perguntas frequentes
Se eu mudar o tamanho da fonte raiz depois de já ter convertido um valor, o resultado em rem muda junto? Sim. O tamanho da fonte raiz é a base usada para calcular o rem, e o conversor foi feito justamente para permitir ajustar esse valor e ver as conversões refletirem a configuração real do seu projeto.
Por que existe um campo separado para o contexto em em, se já tenho o tamanho da fonte raiz? Porque o em não se baseia na raiz da página, e sim no tamanho de fonte do elemento onde está sendo aplicado. O campo "tamanho da fonte de contexto em em (px)" existe justamente para informar esse tamanho específico e obter um em correto para aquele elemento.
Posso digitar um valor negativo no campo de Valores? Sim, valores negativos em px são aceitos. Já o tamanho da fonte raiz e o tamanho da fonte de contexto em em precisam ser sempre maiores que 0 — um valor zero ou negativo nesses dois campos gera uma mensagem de erro.
Os valores que eu digito ficam salvos em algum servidor? Não. Cada conversão roda no seu navegador, e nada do que você digita é enviado para o BroBroGo.