O que faz o conversor de px para rem e em
Este conversor traduz valores em pixel (px) para rem e em, e também no sentido inverso. Basta introduzir um valor numa das três unidades para que as outras duas sejam calculadas e apresentadas automaticamente. É pensado para quem precisa de converter valores fixos em pixels para unidades relativas ao construir uma interface responsiva, para perceber como um tamanho de fonte raiz diferente altera os valores em rem, para calcular valores em em a partir do tamanho de fonte de um elemento específico, ou para garantir que o dimensionamento continua correto quando o leitor altera o tamanho de fonte predefinido do navegador.
Além do campo "Valores", a ferramenta disponibiliza dois campos que controlam o cálculo: "Tamanho da fonte raiz (px)" e "tamanho da fonte de contexto em em (px)".
Como as unidades se atualizam enquanto escreve
Editar qualquer um dos três campos — px, rem ou em — atualiza os outros dois de imediato, tal como indica a própria ferramenta: "Introduza um valor em px, rem ou em — os outros dois serão atualizados enquanto digita." Não é preciso confirmar nada nem mudar de ecrã: o resultado aparece à medida que escreve. No estado inicial, 16px equivalem a 1rem e a 1em, porque tanto o tamanho da fonte raiz como o tamanho da fonte de contexto em em começam definidos em 16px.
O campo "Valores" aceita também números negativos, pelo que pode converter um deslocamento ou uma margem negativa da mesma forma que converteria um valor positivo.
Tamanho da fonte raiz e o efeito nos valores em rem
O campo "Tamanho da fonte raiz (px)" define a base a partir da qual todos os valores em rem são calculados. Por predefinição está fixado em 16px, mas pode ser alterado para corresponder ao tamanho de fonte raiz definido no CSS do seu projeto; sempre que o altera, os valores em rem apresentados são recalculados de imediato. Este campo tem de conter um número maior do que 0 — se introduzir outra coisa, a ferramenta mostra a mensagem "O tamanho da fonte raiz deve ser um número maior do que 0."
Tamanho da fonte de contexto em em
O em não depende da raiz da página, mas do tamanho de fonte do próprio elemento onde é aplicado. É para isso que serve o campo "tamanho da fonte de contexto em em (px)": introduza o tamanho de fonte do elemento que está a dimensionar e a ferramenta calcula o valor em em correspondente a esse contexto. Tal como o campo da raiz, este está predefinido em 16px e também tem de conter um número maior do que 0; caso contrário, aparece a mensagem "O tamanho da fonte de contexto em em deve ser um número maior do que 0."
A tabela de conversões comuns de px para rem
Junto aos campos de conversão, a ferramenta apresenta a tabela "Conversões comuns de px → rem (base de 16px)", com uma lista de valores em pixel habituais já convertidos para rem, partindo de uma fonte raiz de 16px. É uma forma rápida de consultar a equivalência de um valor comum sem ter de o escrever no campo "Valores".
Casos especiais e mensagens de erro
Se introduzir no campo "Valores" algo que não seja um número válido, a ferramenta apresenta a mensagem "Introduza um número para converter." em vez de um resultado. Os campos de tamanho de fonte raiz e de contexto em em têm as suas próprias mensagens, já referidas acima, e ambos exigem um número maior do que 0 — não é possível definir uma base de 0 ou negativa para os cálculos.
Toda a conversão é executada no seu navegador: nada do que introduzir nestes campos é carregado para o BroBroGo.
Perguntas frequentes
Qual é a diferença entre px, rem e em? O px é uma unidade de comprimento fixo. O rem é calculado a partir do tamanho da fonte raiz da página — com uma raiz de 16px, 1rem corresponde a 16px. O em, por sua vez, é calculado a partir do tamanho da fonte do próprio elemento onde é usado, e não da raiz da página. Por isso, definir tamanhos em rem faz com que tudo se ajuste proporcionalmente quando o leitor altera o tamanho de fonte predefinido do navegador.
Porque existe um tamanho de fonte de contexto em em separado do tamanho da fonte raiz? Porque o em depende do tamanho de fonte do elemento a que se aplica, que pode ser diferente da raiz da página. Ao preencher o campo "tamanho da fonte de contexto em em (px)" com o tamanho de fonte real desse elemento, o valor em em calculado pela ferramenta corresponde ao que seria aplicado nesse elemento específico. Quando o elemento usa o mesmo tamanho de fonte da raiz, os dois campos podem ficar iguais.
E se o tamanho da minha fonte raiz não for 16px? Basta alterar o campo "Tamanho da fonte raiz (px)" para o valor usado no seu CSS; todos os valores em rem apresentados são recalculados de imediato. A tabela de conversões comuns assume uma base de 16px, que é o valor predefinido da própria ferramenta, por isso funciona como referência rápida para esse caso específico e não substitui o cálculo feito com o seu próprio valor de raiz.