Conversor de PX para REM (e REM para PX)
Converta px para rem e rem para px instantaneamente. Altere o font-size raiz para adaptar ao seu projeto e veja o resultado em tempo real. Gratuito, sem cadastro.
Tabela de PX para REM (base 16px)
Valores de px comuns convertidos para rem, considerando o font-size raiz padrão de 16px.
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
O que faz este conversor de px e rem
Converte medidas expressas em px para rem e o inverso. O valor de referência — a font-size do elemento raiz (html) — pode ser alterado à vontade e o resultado é recalculado de imediato.
**A primeira coisa a compreender é que o rem se apoia no tamanho de letra do elemento raiz, e esse tamanho pode ser alterado por quem visita a página.** Se nas definições do navegador o tamanho da fonte for aumentado, tudo o que está em rem cresce com ele: é precisamente nisso que a unidade consiste. **Por essa razão não se deve escrever `html { font-size: 16px }` na folha de estilos.** Fazê-lo anula a preferência da pessoa e fecha o caminho a quem precisa de ampliar o texto para o ler. Se quiser alterar a referência, use uma notação relativa como `%` ou `rem`.
**Em segundo lugar, a diferença entre `em` e `rem` está em acumularem-se ou não.** O `em` toma por base o tamanho de letra do elemento onde se encontra, pelo que em estruturas encaixadas se vai multiplicando; o `rem` olha sempre para o elemento raiz e não muda por muitos níveis que existam.
**Há ainda um ponto que engana com frequência: o `em` dentro de uma media query não se apoia no elemento raiz, mas no tamanho por omissão do navegador.** Mesmo que reduza a font-size de html, os pontos de corte não se moverão com ela.
Como se usa
- Fixe o valor de referência **Na maioria dos navegadores o valor por omissão é 16px.** Na dúvida, deixe-o em 16.
- Introduza px ou rem Escreva em qualquer dos lados e o outro mostrará a conversão no momento.
- Copie a notação CSS A cadeia com a sua unidade pode ser levada tal como está.
- Consulte a tabela de equivalências Os tamanhos de uso frequente aparecem juntos, prontos a escolher.
Dicas para aproveitar melhor
- Por padrão 1rem equivale a 16px, mas usuários com baixa visão costumam aumentar o tamanho de texto padrão do navegador: valores em rem acompanham esse ajuste automaticamente, enquanto valores em px não.
- Os breakpoints de media queries costumam ser escritos em px por tradição, mas font-size, padding e margin são boas opções para usar rem, mantendo o equilíbrio geral do layout quando o usuário muda sua preferência de tamanho de texto.
- Algumas equipes definem html { font-size: 62.5%; } para que 1rem equivalha a 10px, facilitando o cálculo mental (1.6rem = 16px). Informe 10 como valor base acima para converter usando essa convenção.
- Uma convenção comum é usar rem para os valores de layout em nível de página e em para o espaçamento interno de um componente reutilizável, para que o componente escale conforme seu próprio font-size onde for usado.
Situações de uso
Levar para CSS as medidas de um desenho
**Os desenhos chegam normalmente em px.** Com a referência fixada, a passagem a rem é mecânica.
Uniformizar unidades num projeto existente
Ao arrumar código com px e rem misturados, convém ter a tabela à mão.
Alterar a referência e ver o efeito
**Ao mover o valor base, tudo o que está em rem se desloca com ele.** Aqui pode medir quanto.
Decidir os pontos de corte de uma media query
**O em de uma media query apoia-se no valor por omissão do navegador, não no raiz.** A premissa da conversão é outra.
Termos empregues
- rem
- Unidade relativa ao tamanho de letra do elemento raiz (html). **A sua referência não muda por muito que se encaixe.**
- em
- Unidade relativa ao tamanho de letra do elemento onde aparece. **Em estruturas encaixadas vai-se multiplicando.**
- Elemento raiz
- O elemento `html`, o mais exterior do documento. Toda a conversão de rem parte do seu tamanho de letra.
- Tamanho por omissão do navegador
- 16px na maioria dos ambientes. **Quem visita a página pode alterá-lo, e é justamente isso que há que respeitar.**
- Fixar a font-size de html em px
- **Anula a preferência da pessoa, pelo que convém evitá-lo.** Para alterar a referência, use uma notação relativa como `%`.
- em dentro de uma media query
- **Apoia-se no valor por omissão do navegador, não no elemento raiz.** Mudar a font-size de html não move os pontos de corte.
Perguntas frequentes
Curiosidade — Como o rem chegou à especificação do CSS
A unidade rem foi adicionada ao módulo CSS Values and Units por volta de 2011. Antes disso, quase todos os sites dimensionavam texto e espaçamento com px ou em, e o em tinha um problema conhecido: como é baseado no font-size do elemento pai, aninhar elementos fazia o tamanho efetivo se acumular de formas difíceis de prever em layouts complexos.
O rem foi criado justamente para resolver esse problema, referenciando um único ponto de ancoragem sempre disponível: o elemento raiz, não importa o nível de aninhamento. Nos anos em que o Internet Explorer 9 ainda não suportava rem, era comum escrever primeiro um valor em px como alternativa e depois o valor em rem (font-size: 16px; font-size: 1rem;). Quando os principais navegadores passaram a suportá-lo, em meados da década de 2010, essa alternativa deixou de ser necessária.
Hoje, construir toda a escala tipográfica e de espaçamento de um site em torno do rem é uma prática comum de acessibilidade: permite que a página inteira se ajuste graciosamente quando um visitante aumenta o tamanho de texto do navegador, em vez de quebrar ou cortar conteúdo. Diretrizes como o WCAG (Web Content Accessibility Guidelines) recomendam explicitamente não depender apenas de unidades fixas para o tamanho do texto.