Saltar para o conteúdo principal
LibraTool logoLibraTool

Conversor Pixel para REM grátis

Converta entre px, rem, em, pt, vw, vh e % com um tamanho de fonte base configurável. Inclui uma tabela de referência para tamanhos de pixel comuns.

Funciona offline depois de carregado
1rem

Contexto (afeta rem/em/vw/vh/%)

Todas as conversões para 16 px

Tokens Tailwind mais próximos (em raiz 16px)

Tamanhos em px comuns → rem (base 16px)

Converter CSS colado

Usos comuns

  • PX para REM para Desenvolvimento WebConverta valores de pixel em unidades rem para CSS escalável e acessível. Defina seu tamanho de fonte base e veja instantaneamente todos os valores equivalentes.
  • Unidades CSS para Design ResponsivoConverta entre px, vw, vh e % para construir layouts que respondemos corretamente a diferentes tamanhos e orientações de tela.
  • Converter Especificações de Design para Unidades CSSTraduza valores de pixel Figma ou Sketch para unidades rem/em para implementação CSS limpa e escalável.
  • Referência de Unidade CSS TailwindEntenda como as classes de dimensionamento Tailwind CSS mapeiam para valores de pixel e rem para implementação precisa.
  • Converter Unidades CSS para Folhas de Estilo de ImpressãoConverta entre px, pt e rem para consultas de mídia impressa e CSS de saída PDF.

Como funciona

Todas as conversões funcionam inteiramente no seu navegador usando um motor aritmético escrito à mão sem dependências. A ferramenta converte entre sete unidades CSS (px, rem, em, pt, vw, vh, e %) encaminhando cada cálculo através de pixels como uma base comum, aplicando divisão ou multiplicação simples contra o seu tamanho de fonte raiz configurado, tamanho de fonte pai, ou dimensões de viewport.

  1. 1
    Defina os seus valores de contexto
    Antes de converter, configura os quatro números que tornam significativas as unidades CSS relativas: tamanho de fonte raiz (padrão 16px, o padrão do navegador), tamanho de fonte do elemento pai (para conversões em e %), e largura e altura do viewport (para vw e vh). São os mesmos valores que o seu navegador usaria ao resolver CSS em tempo de execução.
  2. 2
    O pixel como intermediário universal
    O conversor primeiro chama toPixels() para normalizar a sua entrada a uma contagem de pixels bruta — por exemplo, 1,5rem torna-se 1,5 × baseFontPx, e 50vw torna-se 0,5 × vpWidth. Depois fromPixels() divide essa contagem de pixels pelo fator apropriado para a unidade alvo. Todas as sete unidades são mostradas simultaneamente na tabela de conversão.
  3. 3
    Consulta do token Tailwind mais próximo
    Depois de converter, a ferramenta calcula o valor rem e analisa duas tabelas de consulta codificadas — os treze tokens de tamanho de fonte do Tailwind (text-xs a text-9xl) e a sua escala de espaçamento — encontrando a correspondência mais próxima por distância absoluta. Um sinal = significa que o valor é um token exato; ≈ significa que é a aproximação mais próxima.
  4. 4
    Reescrita em lote de CSS via regex
    O painel de colar CSS aceita texto CSS bruto e aplica uma substituição regex: no modo px→rem corresponde cada token px e substitui a parte numérica por value/baseFontPx + rem; no modo rem→px faz o inverso. A contagem de substituições é mostrada para poder verificar quantos valores foram reescritos.

Ferramentas relacionadas

📏

Conversor de unidades

Converta entre unidades de comprimento, peso, temperatura, área, volume e mais.

Experimentar
📐

Gerador CSS clamp()

Gere um valor CSS clamp() fluido para tipografia e espaçamento responsivos. Defina o tamanho mínimo/máximo e o intervalo de viewport, veja uma pré-visualização ao vivo e copie o CSS em uma linha.

Experimentar
🟦

Gerador de CSS Grid

Projete visualmente um CSS grid — faixas, unidades e lacunas — e copie o CSS e HTML gerados.

Experimentar

Perguntas frequentes