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 apareceu pela primeira vez no rascunho do W3C «CSS3 Values and Units», publicado em setembro de 2006. Até se popularizar, 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. Enquanto era preciso dar suporte ao Internet Explorer 8 e versões anteriores, que não entendem rem, era comum escrever primeiro um valor em px como alternativa e depois o valor em rem (font-size: 16px; font-size: 1rem;) (o IE9 e o IE10 só davam suporte parcial, ignorando rem na propriedade abreviada font e em pseudoelementos). Quando deixou de ser necessário suportar esses IE antigos, em meados da década de 2010, essa alternativa deixou de fazer falta.
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.