O conversor de px para rem calcula a unidade relativa equivalente a qualquer valor em pixels, usando a base de 16px dos navegadores ou a base do seu projeto. Os dois campos se atualizam juntos.
Fórmula
rem = px ÷ tamanho base
px = rem × tamanho base
24px ÷ 16 = 1.5remTruque dos 62,5%
Alguns projetos definem html { font-size: 62.5%; }, o que torna a base 10px (62,5% de 16). Assim, 1,4rem = 14px e as contas ficam de cabeça. Use a base 10 na calculadora para esse caso.
Quando Usar px, rem e em
- rem: tamanhos de fonte, espaçamentos e larguras máximas.
- em: espaçamento interno de botões e ícones que devem acompanhar o texto do próprio componente.
- px: bordas finas (1px), sombras e detalhes que não devem escalar.
Perguntas Frequentes
Como converter px para rem?
Divida o valor em pixels pelo tamanho da fonte base do documento (normalmente 16px). Exemplo: 24px ÷ 16 = 1,5rem. Para o caminho inverso, multiplique: 2rem × 16 = 32px.
Quanto é 1rem em px?
1rem é igual ao font-size do elemento html. Nos navegadores, o padrão é 16px, então 1rem = 16px, a menos que o site ou o usuário mude esse valor.
Qual a diferença entre rem e em?
rem é relativo ao tamanho de fonte do elemento raiz (html). em é relativo ao tamanho de fonte do próprio elemento ou do pai, e por isso se acumula em elementos aninhados. rem é mais previsível para layout.
Por que usar rem em vez de px?
Porque rem respeita a configuração de tamanho de fonte que o usuário escolheu no navegador. Se ele aumentar a fonte padrão para 20px, todo o layout em rem cresce junto. Isso melhora a acessibilidade.