Conversor de PX para REM
Converta valores em pixels para REM e vice-versa instantaneamente. Defina qualquer tamanho de fonte base, visualize uma tabela de conversão completa e copie propriedades personalizadas CSS ou uma tabela em texto simples para sua folha de estilos.
Conversor PX ↔ REM
Digite um valor em qualquer campo — ambos são atualizados em tempo real com base no tamanho da fonte base.
Pixels (px)
REM
CSS font-size raiz
:root { font-size: 16px; }
Valores comuns na base 16px
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 72px | 4.5rem |
| 80px | 5rem |
| 96px | 6rem |
Seus dados permanecem em seu navegador — nenhum dado é enviado para nenhum servidor.
O que é REM e por que usá-lo?
REM (root em) é uma unidade CSS relativa ao tamanho da fonte do elemento raiz (<html>). Como é dimensionada de acordo com a preferência de tamanho de fonte do navegador do usuário, REM é preferido em relação a pixels para tipografia, espaçamento e layout — torna os sites mais acessíveis e fáceis de manter. A base padrão do navegador é 16px, então 1rem = 16px, a menos que seja substituída.
O truque dos 62.5%
Definir :root { font-size: 62.5%; } faz com que 1rem seja igual a 10px (62.5% de 16px), o que simplifica a matemática mental — 1.6rem = 16px, 2.4rem = 24px, e assim por diante. Esta ferramenta permite que você digite qualquer base personalizada para visualizar os valores rem do seu layout em um piscar de olhos.
Como usar
- Defina o tamanho da fonte base (padrão 16px, correspondendo à maioria dos navegadores).
- Digite um valor em pixels — o equivalente em REM é atualizado instantaneamente.
- Ou digite um valor em REM — o equivalente em pixels é atualizado instantaneamente.
- Role para baixo para ver a tabela de conversão para tamanhos comuns.
- Copie a tabela como propriedades personalizadas CSS ou texto simples para seu projeto.
Toda conversão é executada em seu navegador — nada é enviado para nenhum servidor.
Perguntas Frequentes
- Qual é o tamanho de fonte padrão do navegador?
- A maioria dos navegadores usa 16px como padrão para o tamanho da fonte raiz, significando que 1rem = 16px. Os usuários podem alterar isso nas configurações do navegador para acessibilidade, e é exatamente por isso que rem é preferido em relação a valores px fixos.
- Como posso converter px para rem mentalmente?
- Divida o valor em pixels pelo tamanho da fonte base. Com a base padrão de 16px: 24px ÷ 16 = 1.5rem. Se você usar o truque dos 62.5% (base = 10px): 24px ÷ 10 = 2.4rem.
- Devo usar rem ou em?
- REM é relativo ao elemento raiz e é consistente em todo o documento. EM é relativo ao elemento pai mais próximo, o que pode se acumular de forma inesperada. REM é geralmente preferido para tamanhos de fonte e espaçamento; EM pode ser útil para dimensionamento com escopo de componente.
- Esta ferramenta lida com valores não inteiros?
- Sim. Você pode inserir decimais como 14.5px ou 0.875rem e o conversor os manipulará com precisão.