Conversor de unidades CSS para px, rem e em
O Conversor de Unidades CSS transforma um valor de px para rem (ou rem para px, px para em) em todas as outras unidades no instante em que você digita, usando o seu próprio tamanho de fonte base. Informe um número, escolha a unidade de origem e leia px, rem e em lado a lado.
Ele foi feito para desenvolvedores front-end e designers que estão migrando um layout de pixels fixos para unidades relativas. Defina o tamanho da fonte base igual ao seu html { font-size } e a conta fica exata para o seu projeto real, em vez de presumir um 16px fixo.
Como converter unidades CSS
Defina o tamanho da fonte base
O Tamanho da fonte base começa em 16px, o padrão dos navegadores. Mude-o para o html { font-size } raiz do seu projeto para que os resultados em rem e em fiquem corretos.
Escolha a unidade de entrada
Clique na aba px, rem ou em para informar ao conversor em qual unidade está o seu valor.
Digite um valor
Digite qualquer número e veja px, rem e em se atualizarem em tempo real. Toque em um botão de exemplo como 16px ou 1.5rem para carregar um valor comum na hora.
Copie o resultado
Clique no botão de copiar ao lado de qualquer linha para copiar o valor já com o sufixo da unidade, como 1.5rem, pronto para colar direto no seu CSS.
Precisa de um único sentido? Abra um par focado como PX para REM, REM para PX ou PX para EM. Os dois campos são editáveis, então você pode digitar em qualquer um, e o botão Inverter troca para o par reverso mantendo o seu valor.
Recursos
Conversão em tempo real
Os valores se atualizam no momento em que você digita, convertendo entre px, rem e em sem precisar apertar nenhum botão.
Fonte base personalizável
Defina o tamanho da fonte raiz de 1 a 100px (padrão 16px) para que rem e em correspondam ao seu projeto real.
Casas decimais ajustáveis
Escolha de 1 a 6 casas decimais para controlar a precisão dos valores convertidos.
Pares bidirecionais
Nos pares focados PX para REM, REM para PX e PX para EM, digite em qualquer campo e o outro acompanha.
Inverter o sentido
Um clique reverte o par de conversão e leva o valor atual para o sentido oposto.
Tabela de referência rápida
Uma tabela expansível mostra 18 valores comuns em pixels de 8px a 96px junto dos equivalentes em rem e em.
Cópia em um clique
Copie qualquer resultado já com o sufixo da unidade, como 1.5rem, para colar direto na sua folha de estilos.
Botões de exemplo rápido
Botões prontos para tamanhos comuns como 12px, 16px, 24px e 1.5rem carregam um valor com um toque.
Cards de informação das unidades
Cards curtos explicam o que são px, rem e em e quando cada unidade é a escolha certa.
Configurações salvas e sincronizadas
Seu tamanho base e as casas decimais persistem no localStorage e sincronizam entre a página principal e cada par.
Perguntas frequentes
Como converter px para rem?
Divida o valor em pixels pelo tamanho da fonte base (raiz): rem = px ÷ base. Com a base padrão de 16px, 24px vira 1.5rem. Este conversor faz a divisão por você e atualiza no momento em que você digita, então você nunca precisa fazer a conta na mão.
Qual é a fórmula de rem para px?
Multiplique o valor em rem pelo tamanho da fonte base: px = rem × base. Com base de 16px, 1.5rem equivale a 24px. Mude o campo Tamanho da fonte base se o seu projeto usar um tamanho raiz diferente, e o resultado acompanha.
O rem é sempre baseado em 16px?
16px é apenas o padrão. O rem é relativo ao tamanho de fonte do elemento raiz <html>, que a maioria dos navegadores define como 16px, mas você pode mudar isso no CSS. Por isso o conversor traz o campo Tamanho da fonte base — defina-o com o tamanho raiz real do seu projeto para resultados corretos.
Qual a diferença entre em e rem?
O rem é sempre relativo ao tamanho de fonte do elemento raiz, então permanece consistente em toda a página. O em é relativo ao tamanho de fonte do elemento pai, o que significa que valores em em se acumulam quando os elementos são aninhados — 1.2em dentro de 1.2em resulta em 1.44× o tamanho da raiz.
Quando devo usar rem em vez de px?
Use rem para tipografia, espaçamento e tamanhos de layout que você quer que escalem com as preferências do usuário — leitores que aumentam a fonte padrão do navegador se beneficiam de designs baseados em rem. Mantenha px para o que deve permanecer fixo, como bordas e sombras.
Por que o par PX para EM mostra "Tamanho da fonte do pai"?
Porque o em é relativo ao tamanho de fonte do elemento pai, e não da raiz. O rótulo muda para Tamanho da fonte do pai como lembrete de que o tamanho de referência depende de onde o elemento está no DOM, não do tamanho da raiz <html>.
Minhas configurações ficam salvas entre as visitas?
Sim. Seu tamanho da fonte base e as casas decimais ficam guardados no localStorage do navegador e são compartilhados entre o conversor principal e cada par focado. Eles persistem depois de fechar o navegador, e nada é enviado a um servidor.
Ainda não há comentários. Seja o primeiro a comentar!