Pular para o conteúdo
🛠️
Whiz Tools

Conversor de PX para REM para EM – Calculadora Gratuita de Unidades CSS

Converta pixels para unidades REM e EM instantaneamente. Conversor gratuito de unidades CSS para design web responsivo. Suporta tamanhos de fonte personalizados e cálculos em tempo real para resultados precisos.

Conversor de Unidades PX, REM e EM

Converta entre pixels (PX), root em (REM) e em (EM). Digite um valor em qualquer campo para ver os valores equivalentes nas outras unidades.

px
px
px
rem
em
Visualização não disponível para valores negativos ou zero

Fórmulas de Conversão

  • PX para REM: valor em px ÷ tamanho da fonte raiz
  • PX para EM: valor em px ÷ tamanho da fonte do elemento pai
  • REM para PX: valor em rem × tamanho da fonte raiz
  • EM para PX: valor em em × tamanho da fonte do elemento pai
Calculadora de carregamento...
📚

Documentação

Conversor de unidades PX, REM e EM

Um conversor de px para rem e em converte um comprimento CSS entre pixels (px), em raiz (rem) e em, usando um tamanho de fonte raiz e um tamanho de fonte do elemento pai definidos pelo usuário. As três unidades são as formas mais comuns de dimensionar texto e espaçamento em CSS, a linguagem usada para estilizar páginas da web.

O que são px, rem e em?

Um pixel (px) é uma unidade fixa. Uma caixa definida com 200px de largura permanece com 200px de largura, independentemente do tamanho de fonte usado pela página.

Um rem ("em raiz") é uma unidade que varia de acordo com o tamanho da fonte do elemento raiz da página, normalmente a tag <html>. A maioria dos navegadores define o tamanho da fonte raiz como 16px, a menos que o site o altere. Se o tamanho da fonte raiz for 16px, então 1rem será igual a 16px.

Um em é uma unidade que varia de acordo com o tamanho da fonte do elemento pai, o elemento que o contém. Se um elemento pai tiver font-size: 20px, então 1em dentro desse pai será igual a 20px.

A principal diferença entre rem e em é a referência usada por cada um. Rem sempre considera o elemento raiz. Em considera o pai mais próximo, portanto seu valor pode mudar em cada nível de aninhamento.

Como calcular px para rem

Para converter pixels em rem, divida o valor em pixels pelo tamanho da fonte raiz:

r=pRr = \frac{p}{R}

onde r é o comprimento em rem, p é o comprimento em pixels e R é o tamanho da fonte raiz em pixels.

Exemplo prático

Com o tamanho de fonte raiz padrão de 16px, 24px é convertido em:

24 ÷ 16 = 1,5rem

Se um site definir o tamanho da fonte raiz como 10px (um truque comum, feito definindo html { font-size: 62.5%; }, pois 62,5% de 16px é 10px), os mesmos 24px se tornarão:

24 ÷ 10 = 2,4rem

Como calcular rem para px

Para fazer a conversão inversa, multiplique o valor em rem pelo tamanho da fonte raiz:

p=r×Rp = r \times R

onde p é o comprimento em pixels, r é o comprimento em rem e R é o tamanho da fonte raiz.

Com uma raiz de 16px, 1.5rem é convertido novamente em 1,5 × 16 = 24px.

Como calcular px para em

Para converter pixels em em, divida o valor em pixels pelo tamanho da fonte do elemento pai:

e=pPe = \frac{p}{P}

onde e é o comprimento em em e P é o tamanho da fonte do elemento pai em pixels.

Exemplo prático

Se o tamanho da fonte do elemento pai for 20px, então 24px será convertido em:

24 ÷ 20 = 1,2em

Como calcular em para px

Multiplique o valor em em pelo tamanho da fonte do pai:

p=e×Pp = e \times P

onde p é o comprimento em pixels, e é o comprimento em em e P é o tamanho da fonte do elemento pai.

Com um pai de 20px, 1.2em é convertido novamente em 1,2 × 20 = 24px.

Como calcular rem para em e em para rem

Como rem e em usam tamanhos de fonte diferentes como referência, a conversão entre eles requer tanto o tamanho da fonte raiz quanto o tamanho da fonte do pai:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

onde R é o tamanho da fonte raiz e P é o tamanho da fonte do elemento pai.

Exemplo prático

Com um tamanho de fonte raiz de 16px e um tamanho de fonte do pai de 20px, 2rem é convertido em:

2 × (16 ÷ 20) = 1,6em

Se os tamanhos de fonte raiz e do pai forem iguais, 1rem será sempre igual a 1em.

Quando cada unidade é útil

Pixels funcionam bem para detalhes que não devem mudar de tamanho, como uma borda de 1px ou um ícone de largura fixa.

Rem é comum para espaçamento e tipografia que devem permanecer consistentes em toda a página. Como sempre se refere ao tamanho da fonte raiz, um valor em rem não muda, independentemente do nível de aninhamento do elemento. Isso também faz com que layouts baseados em rem se ajustem automaticamente quando o usuário aumenta o tamanho de fonte padrão do navegador, o que ajuda pessoas com baixa visão.

Em funciona bem dentro de um único componente independente, como um botão, no qual o preenchimento deve variar junto com o tamanho da fonte do próprio botão. Um problema comum do em é que ele se acumula: se vários elementos aninhados usarem font-size: 1.2em, cada nível multiplica o anterior, fazendo os tamanhos de fonte crescerem mais rapidamente do que o pretendido.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Após três níveis, o texto terá crescido cerca de 73%, e não 20%, como um desenvolvedor poderia esperar de uma única regra 1.2em.

Como usar o conversor

  1. Insira um valor no campo de pixels, rem ou em.
  2. Os outros dois campos são atualizados automaticamente, com arredondamento para quatro casas decimais.
  3. Defina o tamanho da fonte raiz para corresponder ao elemento <html> do projeto. Na maioria dos navegadores, o padrão é 16px, e ele afeta apenas rem.
  4. Defina o tamanho da fonte do pai para corresponder ao tamanho da fonte do elemento dentro do qual um valor em seria usado. Ele afeta apenas em.
  5. Use o botão de cópia ao lado de um campo para copiar seu valor.

Ambos os campos de tamanho da fonte aceitam um número inteiro de pixels, e o menor valor permitido é 1px. O botão de redefinição limpa o valor e restaura ambos os tamanhos de fonte para 16px.

Abaixo dos campos, a ferramenta desenha uma barra para cada unidade. As três barras representam o mesmo comprimento físico, portanto têm a mesma largura; isso é uma verificação rápida de que a conversão está correta. Uma barra é desenhada com seu comprimento real em pixels até 300px; qualquer valor maior é reduzido para caber, de modo que um valor de 600px e um valor de 900px terminam em 300px. As barras aparecem somente quando o valor em pixels é maior que zero.

Dúvidas frequentes

Qual é a diferença entre rem e em? Rem sempre se refere ao tamanho da fonte do elemento raiz. Em se refere ao tamanho da fonte do elemento pai mais próximo. Um valor em rem permanece igual em toda a página; um valor em em pode mudar dependendo do nível de aninhamento do elemento.

Por que os navegadores usam 16px como tamanho de fonte padrão? 16px é há muito tempo o tamanho de texto padrão nos principais navegadores porque é confortável de ler em telas comuns sem estilos adicionais. As diretrizes de acessibilidade na web recomendam que o texto possa ser redimensionado em até 200% sem comprometer o layout da página, e 16px é um ponto de partida prático para isso.

O que é o truque de 62,5%? Definir html { font-size: 62.5%; } transforma o tamanho de fonte raiz padrão de 16px em 10px, pois 62,5% de 16 é 10. Isso simplifica os cálculos com rem, porque 1,6rem equivale a 16px e 2,4rem equivale a 24px.

Os valores em px, rem e em podem ser negativos? Sim, em propriedades que aceitam comprimentos negativos, como margens ou transformações CSS. O preenchimento não pode ser negativo em CSS; os navegadores ignoram um valor de preenchimento negativo. O conversor aceita valores negativos, mas não desenha barras para eles, pois uma barra não pode ter largura negativa.

Todo valor em pixels deve ser convertido para rem? Não necessariamente. Bordas e outros detalhes finos geralmente são mantidos em pixels, pois raramente precisam acompanhar a escala do tamanho da fonte e podem parecer irregulares em larguras menores que um pixel. Rem é adequado para espaçamento e tipografia que devem acompanhar a preferência de tamanho de fonte do usuário.

A escolha da unidade afeta o desempenho da página? Não. Os navegadores convertem todo comprimento CSS para o mesmo valor interno durante o layout, portanto px, rem e em são renderizados com a mesma rapidez. A escolha entre eles afeta a manutenibilidade e a acessibilidade, não a velocidade.