PT
Ver ferramentas

Conversor de px para rem – Pixels para rem e vice-versa

Transforme valores em pixels em rem para um CSS responsivo e acessível, ou rem de volta em pixels. Defina sua própria fonte raiz, use a tabela rápida ou cole uma folha de estilos inteira para converter todos os px de uma vez.

Roda no seu navegador 100% grátis Sem cadastro
Resposta rápida

rem = px ÷ fonte raiz. Com os 16px padrão do navegador, 24px = 1,5rem, 32px = 2rem e 14px = 0,875rem. Digite um valor em qualquer campo e o outro muda na hora; altere a fonte raiz se o seu elemento html usa outro tamanho.

Como usar: Conversor de px para rem

  1. Confira a fonte raiz (16px por padrão).
  2. Digite pixels para obter rem, ou rem para obter pixels.
  3. Use a tabela para os tamanhos mais comuns.
  4. Cole CSS para converter todos os px de uma vez.
  5. Copie o CSS convertido.

O que é rem?

rem significa “root em”: uma medida relativa ao tamanho da fonte do elemento raiz html. Os navegadores usam 16px por padrão, então 1rem = 16px, a menos que você mude. Diferente do em, que depende do elemento pai e se acumula ao aninhar, o rem sempre se refere ao mesmo valor raiz e é mais previsível.

pxrem (base 16px)pxrem (base 16px)
12px0,75rem32px2rem
14px0,875rem40px2,5rem
16px1rem48px3rem
20px1,25rem64px4rem
24px1,5rem96px6rem

Os valores mais buscados têm página própria, por exemplo 16px para rem, 24px para rem e 32px para rem.

Por que usar rem em vez de px?

Quando o visitante aumenta o tamanho de fonte padrão do navegador — comum para pessoas com baixa visão —, textos e espaçamentos em rem crescem junto, enquanto valores em px ficam fixos. Usar rem em fontes, padding, margens e media queries mantém o layout proporcional e ajuda a cumprir o critério 1.4.4 da WCAG (redimensionar texto). Bordas finas e sombras podem continuar em px.

O truque dos 62,5 %

Alguns projetos usam `html { font-size: 62.5%; }` para que 1rem valha 10px e a conta fique fácil (24px = 2,4rem). Funciona, mas substitui o tamanho escolhido pelo usuário em tudo que não for reescalado, por isso muitas equipes preferem manter 16px e usar um conversor como este. Digite 10 como fonte raiz para reproduzir essa configuração.

Convertendo uma folha de estilos inteira

Cole o CSS na caixa de conversão e cada número seguido de px vira rem com a sua fonte raiz. 0px vira 0 e valores de 1px são mantidos por padrão para as bordas continuarem nítidas. Depois, revise as media queries: nelas, o rem sempre usa o padrão do navegador, não o tamanho do seu html.

Ferramentas relacionadas

Arredonde cantos com o Gerador de border-radius, crie sombras com o Gerador de box-shadow CSS e minifique o arquivo final com o Minificador e formatador de CSS.

Você também pode gostar destas ferramentas grátis: Formatador JSON, Gerador de senha e Testador de regex.

Cálculos populares

8 pixels em rem10 pixels em rem11 pixels em rem12 pixels em rem13 pixels em rem14 pixels em rem15 pixels em rem16 pixels em rem17 pixels em rem18 pixels em rem19 pixels em rem20 pixels em rem21 pixels em rem22 pixels em rem24 pixels em rem25 pixels em rem26 pixels em rem28 pixels em rem30 pixels em rem32 pixels em rem34 pixels em rem36 pixels em rem38 pixels em rem40 pixels em rem

Perguntas frequentes

Como converto px para rem?

Divida os pixels pela fonte raiz. Com 16px: 24 ÷ 16 = 1,5rem.

Quantos px tem 1rem?

16px por padrão, porque os navegadores usam fonte raiz de 16px.

Qual a diferença entre rem e em?

rem depende da fonte do elemento html; em depende do elemento pai e se acumula ao aninhar.

Devo usar rem ou px no tamanho da fonte?

rem é melhor para acessibilidade porque respeita a fonte escolhida no navegador.

Posso converter um arquivo CSS inteiro?

Sim. Cole na caixa de conversão e todos os valores em px serão convertidos.

Última atualização: