Conversor de Unidades CSS
Converta unidades de comprimento CSS — px, rem, em, pt e % — ao vivo no seu navegador. Defina um tamanho de fonte raiz e cada unidade atualiza instantaneamente.
Cada conversão é calculada localmente no seu navegador; os valores que você digita nunca são enviados.
Trabalhando com cores CSS? Experimente o Conversor de Cores CSS.
Sobre Conversor de Unidades CSS
Este conversor de unidades CSS transforma um comprimento que você digita em uma unidade em todas as outras unidades CSS de uma vez — px, rem, em, pt e %. Digite um valor em qualquer campo e os outros atualizam ao vivo, então você lê um resultado de px para rem ou pt para px sem fazer a conta na mão. Um campo de tamanho de fonte raiz (16px por padrão) controla as relações de rem, em e %, o que espelha como os navegadores resolvem unidades relativas em relação ao tamanho de fonte da página. Uma referência rápida embutida mostra os valores comuns de px para rem que designers reutilizam — 12, 14, 16, 24, 32 e mais — na sua base escolhida. Cada resultado tem um botão de cópia para que você o coloque direto em uma folha de estilos. Tudo roda no seu navegador, então os valores que você digita permanecem no seu dispositivo.
Recursos
- Converte entre px, rem, em, pt e % no momento em que você digita em qualquer campo
- Um tamanho de fonte raiz configurável controla rem, em e % para que os resultados batam com o seu CSS
- Conversão precisa de pt usando o fator CSS 96/72 (1pt = 1,3333px)
- Trata % como uma fração do tamanho de fonte raiz, exatamente como o CSS relativo à fonte
- Tabela de referência rápida de valores comuns de px para rem (12, 14, 16, 24, 32) na sua base
- Ajusta os resultados a uma precisão sensata e remove zeros à direita para valores limpos
- Cópia em um clique em cada unidade, com o sufixo da unidade incluído
- Lembra o seu último valor e tamanho de fonte base entre as visitas
Como usar Conversor de Unidades CSS
- Defina o tamanho de fonte raiz se ele for diferente do padrão de 16px do navegador.
- Digite um valor em qualquer campo de unidade — px, rem, em, pt ou %.
- Leia o valor equivalente em cada outra unidade enquanto atualiza ao vivo.
- Clique no botão de cópia ao lado de uma unidade para pegar o valor com seu sufixo.
- Use a tabela de referência rápida para os pares comuns de px para rem na sua base.
Exemplo
Entrada
/* root font-size: 16px */
.card { padding: 24px; }
Saída
.card { padding: 1.5rem; }
/* 24px = 1.5rem = 18pt = 150% at base 16px */
Em uma base de 16px, 24px equivale a 1.5rem — útil para migrar um layout para rem.
Erros comuns e solução de problemas
- Seus resultados de rem e % parecem errados mesmo com px correto. — Verifique o tamanho de fonte raiz. rem, em e % são resolvidos em relação a essa base, então defina-a para corresponder ao font-size do seu elemento :root ou html.
- pt não corresponde ao que você vê em uma ferramenta de design. — Este conversor usa a definição CSS em que 1pt = 96/72 px (1,3333px). Ferramentas de impressão ou DTP podem assumir 72dpi, o que dá 1pt = 1px.
- em e rem mostram o mesmo número, mas você esperava que diferissem. — O conversor usa uma única base para ambos para manter as coisas simples. No CSS real, em é relativo ao próprio font-size do elemento, enquanto rem é relativo à raiz, então eles só divergem quando um pai muda o font-size.
- Os campos se esvaziam quando você deixa o tamanho de fonte raiz vazio. — Uma base vazia ou zero é tratada como inválida; o conversor recorre a 16px. Digite um número positivo para controlar rem, em e % você mesmo.
Perguntas frequentes
- Como converto px para rem?
- Digite o valor em pixels no campo px e leia o campo rem. rem é o valor dividido pelo tamanho de fonte raiz, então na base padrão de 16px, 16px é 1rem e 24px é 1.5rem.
- Como converto rem para px?
- Digite o valor no campo rem e leia px. rem para px é o valor multiplicado pelo tamanho de fonte raiz, então 2rem em uma base de 16px é 32px.
- Qual tamanho de fonte base o conversor usa?
- Ele usa 16px por padrão, o tamanho de fonte raiz padrão do navegador, e você pode mudá-lo no campo Tamanho de fonte raiz. Essa base controla cada resultado de rem, em e % para que eles batam com a sua folha de estilos.
- Por que 1pt equivale a 1,3333px aqui?
- O CSS define 1pt como 1/72 de polegada e 1px como 1/96 de polegada, então 1pt = 96/72 px = 1,3333px. É por isso que 12pt converte para exatamente 16px, o tamanho comum de texto do corpo.
- Qual é a diferença entre em e rem?
- rem é relativo ao tamanho de fonte raiz, enquanto em é relativo ao próprio font-size do elemento. Esta ferramenta usa uma base para ambos por simplicidade, então eles aparecem iguais; defina o tamanho de fonte raiz para modelar o lado rem.
- A conversão é feita em um servidor?
- Não. A conversão de unidades CSS roda inteiramente no seu navegador com aritmética simples, então os valores que você digita permanecem no seu dispositivo.
Ferramentas relacionadas
Todas as ferramentas de ArrayKit