Conversor PX para REM
O Conversor PX para REM permite alternar instantaneamente entre pixels (px), root em (rem) e em para qualquer tamanho de fonte raiz configurado. Pixels são unidades absolutas fixas à resolução da tela, enquanto unidades rem escalam de acordo com o tamanho de fonte do elemento raiz — tipicamente 16px na maioria dos navegadores. Isso torna o rem a unidade preferida para design web responsivo e acessível.
Projetar com rem e em em vez de px garante que layouts e tipografia se adaptem bem quando o usuário altera o tamanho de fonte padrão do navegador — fundamental para conformidade com acessibilidade. Insira qualquer valor em px, rem ou em junto ao tamanho base do seu projeto e veja instantaneamente os equivalentes nas três unidades.
Como funciona
rem = px ÷ base; px = rem × base; em = px ÷ tamanho-de-fonte-pai (tratado como base). Base padrão: 16px (padrão do navegador).
Casos de uso
- Converter valores em pixels de ferramentas de design para rem em folhas de estilo CSS
- Garantir tipografia acessível que escala conforme as preferências de fonte do usuário
- Definir tokens de espaçamento (margin, padding, gap) em rem para layouts responsivos
- Verificar que tamanhos de componentes permanecem consistentes em diferentes bases de fonte
- Migrar bases de código legadas em px para unidades modernas em rem/em
Perguntas frequentes
Como converter px para rem com base de 16px?
Divida o valor em pixels pelo tamanho de fonte base: rem = px ÷ base. Com a base padrão de 16px, 24px vira 24 ÷ 16 = 1,5rem, e 8px vira 0,5rem. Para fazer o caminho inverso, multiplique o valor em rem pela base: 1,5rem × 16 = 24px.
Qual a diferença entre rem e em no CSS?
O rem é sempre relativo ao tamanho de fonte do elemento raiz, enquanto o em é relativo ao tamanho de fonte do elemento pai. Isso significa que valores em em podem se acumular quando elementos estão aninhados, enquanto o rem permanece previsível em toda a página. Este conversor trata o tamanho de fonte do pai como igual à base, permitindo comparar px, rem e em diretamente.
Por que 16px é o tamanho de fonte base padrão?
A maioria dos navegadores vem com tamanho de fonte raiz padrão de 16px, então 1rem equivale a 16px, a menos que você ou o usuário altere isso. Por isso 16px é a base padrão usada nas conversões de px para rem. Se o seu projeto define outro tamanho de fonte raiz no CSS, informe esse valor como base para obter resultados corretos.
Quantos rem são 24px, 32px ou 40px?
Com a base padrão de 16px, 24px = 1,5rem, 32px = 2rem e 40px = 2,5rem. Esses equivalentes mudam se o tamanho de fonte raiz for diferente — por exemplo, com base de 10px, 24px seria 2,4rem. Sempre confirme a base do seu projeto antes de converter.
Devo usar px ou rem para tamanhos de fonte?
O rem é geralmente preferido para tamanhos de fonte e espaçamentos porque escala quando o usuário aumenta o tamanho de fonte padrão do navegador, o que é importante para acessibilidade. Valores em pixels permanecem fixos e ignoram essas preferências. Um fluxo comum é pegar os valores em px das ferramentas de design e convertê-los para rem nas folhas de estilo.