Conversor px para rem

Gratuito DevTools

Conversor px para rem

Converta pixels para rem e vice-versa com suporte a font-size base configuravel. Converta em lote, consulte a tabela de referencia e entenda unidades viewport. Resultado instantaneo, 100% no seu navegador.

4.8k usuarios Atualizado em Mar 2026 4.7/5

Avalie esta ferramenta:

4.7 (624 votos) Obrigado!

Configuracao Base

O font-size base define quanto vale 1rem. O padrao do navegador e 16px.

font-size base: px

px → rem

↓

1rem

rem → px

rem

↓

16px

Conversao em Lote

Digite varios valores px (um por linha) para converter todos de uma vez.

Valores em px (um por linha)

Resultado em rem

Tabela de Referencia

Valores comuns — clique em Copiar para copiar o valor rem.

px	rem (base 16px)	Uso comum	Copiar

Unidades Viewport (vw/vh)

Referencia de valores vw em px para larguras de tela comuns.

rem vs em: rem e relativo ao elemento raiz (<html>), enquanto em e relativo ao font-size do elemento pai. Use rem para consistencia global e em quando precisar de escala relativa ao componente.

Como Usar

Converta unidades CSS em segundos.

Configure a base

Defina o font-size base do seu projeto. O padrao do navegador e 16px.

Digite o valor

Insira um valor em px ou rem para ver a conversao instantanea.

Copie o resultado

Clique no icone de copia para copiar o valor convertido para o clipboard.

Use em lote

Cole varios valores em px para converter todos de uma vez na secao de lote.

Sobre o Conversor px/rem

Esta ferramenta converte entre pixels (px) e rem (root em) usando qualquer font-size base configuravel. A conversao e feita localmente no seu navegador, sem nenhum envio de dados.

Por que usar rem?

rem e relativo ao font-size do elemento raiz (<html>), tornando o layout escalavel
Quando o usuario ajusta o tamanho de fonte no navegador, elementos em rem se adaptam automaticamente
Facilita a criacao de sistemas de espacamento e tipografia consistentes
E a unidade recomendada para font-size, padding, margin e gap em projetos modernos

Artigo

px, rem, em: Guia Completo de Unidades CSS para Layouts Responsivos

Por Equipe Chipak • Atualizado em Mar 2026 • 7 min de leitura

Neste artigo

O que e px e quando usar
O que e rem e como funciona
A diferenca entre rem e em
A formula de conversao
Boas praticas de unidades CSS
Perguntas frequentes

1. O Que E px e Quando Usar

Pixel (px) e a unidade absoluta mais comum no CSS. Em telas modernas com alto DPI (retina), um "pixel CSS" pode corresponder a multiplos pixels fisicos — mas logicamente, 1px sempre representa a mesma unidade visual independente da tela.

Use px para: bordas (border: 1px solid), sombras (box-shadow), posicionamento absoluto onde a precisao importa, e tamanhos de icones fixos.

2. O Que E rem e Como Funciona

rem (root em) e uma unidade relativa ao font-size do elemento raiz, ou seja, do elemento <html>. O valor padrao do navegador e 16px, entao 1rem = 16px por padrao.

A grande vantagem e a acessibilidade: usuarios que configuram um tamanho de fonte maior no navegador fazem com que todos os elementos em rem se adaptem proporcionalmente. Isso nao acontece com px.

3. A Diferenca Entre rem e em

Enquanto rem e sempre relativo ao <html>, em e relativo ao font-size do elemento pai imediato. Isso cria o problema do "compounding" (efeito cascata): se um elemento pai tem font-size: 1.2em e um filho tambem tem 1.2em, o filho tera na pratica 1.44em em relacao ao root.

Use em para: padding e margin dentro de componentes onde voce quer que o espacamento acompanhe o tamanho do texto local. Use rem para: font-sizes globais, espacamentos do layout, e qualquer valor que deve ser previsivel em todo o sistema.

"Como regra geral: rem para o sistema de design, em para espacamentos internos de componentes autonomos."

4. A Formula de Conversao

A conversao e simples e direta:

px para rem: rem = px / font-size-base
rem para px: px = rem * font-size-base

Com base 16px: 24px = 24/16 = 1.5rem. Com base 10px (tecnica 62.5%): 24px = 24/10 = 2.4rem. A tecnica 62.5% consiste em definir font-size: 62.5% no html, fazendo 1rem = 10px, o que simplifica a matematica mental.

5. Boas Praticas de Unidades CSS

Use rem para font-size, padding, margin, gap e border-radius
Use px apenas para bordas finas (1px) e sombras
Nunca defina font-size em px no body — isso quebra a acessibilidade do navegador
Em design systems, defina tokens de espaco em rem para garantir escalabilidade
Use a tecnica 62.5% apenas se o projeto inteiro adota — nunca misture com base 16px

6. Perguntas Frequentes

Devo sempre converter todos os px para rem?

Nao. Bordas de 1px, box-shadow e outline geralmente ficam bem em px. O importante e que font-size, padding e margin estejam em rem para respeitar as preferencias de acessibilidade do usuario.

Tailwind CSS usa rem?

Sim. O sistema de espacamento do Tailwind usa rem com base 16px. Por exemplo, p-4 = padding: 1rem = 16px na base padrao.

rem funciona em media queries?

Sim, mas com um detalhe: em media queries, rem e baseado no font-size padrao do navegador (16px), nao no font-size definido no html via CSS. Isso torna as media queries em rem previsíveis e independentes de customizacoes.