Conversor PX para REM
Para converter px em rem, divida o valor em pixels pelo tamanho da fonte raiz: rem = px / raiz. Com a raiz padrão do navegador, de 16px, 24px / 16 = 1.5rem. Mude a base abaixo – 14px para o Ant Design, 10px para o truque dos 62,5 % – e os valores rem e em acompanham; já o valor em pontos acompanha os pixels, porque 1px é sempre 0,75pt.
Converter px, rem, em e pt e rever as substituições CSS.
Raiz positiva; magnitude ≤1 mil milhão; seis decimais arredondados. Pré-visualização limitada a 8–72px. CSS ≤100 000 caracteres. Só se convertem tokens px sem aspas nos valores; comentários, cadeias, URLs e content são preservados. Reveja a saída: conversão lexical limitada, não validação CSS. Os números CSS com expoente (como 1e+3px ou 1e-3px) permanecem inteiramente inalterados.
A conversão ocorre nesta página, sem enviar números ou CSS introduzidos a um serviço de conversão.
O campo em pressupõe que o elemento herda o tamanho de fonte base indicado acima. No CSS, em é resolvido em relação ao tamanho de fonte do próprio elemento – e ao do elemento pai quando você o usa na própria propriedade font-size.
Conversão em lote: cole CSS ou uma lista de valores em px
Cada valor em px é reescrito em rem com base no tamanho de fonte base acima.
Copiado
Falha ao copiar. Selecione o resultado e copie manualmente.
Como converter px em rem?
A fórmula é rem = px / tamanho da fonte raiz e, no sentido inverso, px = rem x tamanho da fonte raiz. Só conta o tamanho de fonte do elemento html raiz, por mais aninhado que o elemento esteja, e é isso que torna a aritmética em rem previsível. Com a raiz padrão de 16px: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem e 40px = 2.5rem.
Não arredonde o resultado. 15px são exatamente 0.9375rem com raiz de 16px; arredondar para 0.94rem leva o tamanho renderizado a 15.04px e quebra o alinhamento de uma grade. Os navegadores calculam comprimentos subpixel e os ajustam à grade de pixels do dispositivo ao pintar, então copie o valor exato que o conversor fornece. O conversor imprime até seis casas decimais: exatas em raízes que dividem sem resto, como 16px e 10px, e com precisão de um milionésimo de rem quando não dividem, como 14px.
Tabela px para rem com raiz de 16px, 14px e 10px
O mesmo valor em pixels vira três valores rem diferentes conforme a raiz definida pelo seu projeto, por isso esta tabela traz os três, além do equivalente em pontos (o CSS define 1px como 1/96 de polegada e 1pt como 1/72, logo 1px = 0.75pt). As colunas de 16px e 10px são exatas. Com raiz de 14px a divisão quase nunca é exata, então esses valores são arredondados para quatro casas decimais e marcados com o sinal de aproximação; o conversor acima mostra mais dígitos.
| Pixels | rem (raiz 16 px) | rem (raiz 14 px) | rem (raiz 10 px) | Pontos |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px, rem ou em: qual unidade usar?
A divisão prática: rem para tudo o que deve acompanhar o tamanho de texto do leitor, em para valores que precisam acompanhar o tamanho de fonte do próprio elemento e px apenas onde um comprimento precisa permanecer fisicamente fixo. A coluna de exemplo pressupõe raiz de 16px e elemento pai de 16px.
| Unidade | Relativa a | 20px equivale a | Melhor para | Acompanha o tamanho de texto do leitor |
|---|---|---|---|---|
| px | Nada: é absoluta (1px = 1/96 de polegada) | 20px | Bordas de um pixel, anéis de foco, ícones de tamanho exato | Não |
| rem | O tamanho de fonte do elemento html raiz | 1.25rem | Tamanhos de fonte, espaçamentos, breakpoints, escalas tipográficas inteiras | Sim |
| em | O tamanho de fonte do próprio elemento (o do pai ao definir font-size) | 1.25em | Preenchimento que precisa crescer junto com o rótulo que envolve | Sim |
| % | O valor do elemento pai para aquela propriedade | 125% | Larguras fluidas e árvores antigas de font-size | Sim (font-size) |
Devo usar px ou rem para preenchimento, margens e bordas?
Use rem para preenchimentos e margens que devem respirar quando o texto cresce: preenchimento de botões, respiro dos cartões, espaçamento de seções, intervalos de grade. Para linhas finas, fique com px. Uma borda de 1px é um pixel independente do dispositivo, bem nítido, enquanto essa mesma borda escrita como 0.0625rem pode ser arredondada para zero ou ficar borrada em certos níveis de zoom, e o mesmo vale para anéis de foco e separadores de 2px. Por isso a conversão em lote acima deixa os valores de 1px e 2px intactos por padrão e reescreve todo o resto.
As media queries são o outro lugar em que rem se paga. Dentro de uma media query, rem é resolvido em relação ao tamanho de fonte inicial do navegador, e não à sua regra html: um breakpoint de 48rem equivale a 768px para quem usa o padrão e cresce para quem aumentou o tamanho do texto. Breakpoints em px nunca se movem.
Como converter px em rem no Figma, no VS Code e no Tailwind?
O Figma mede em px, mas o Dev Mode consegue gerar rem: abra as configurações do Inspect, escolha «Set unit scale» e informe o tamanho de fonte raiz (por padrão, 1rem = 16px). Extensões do VS Code como o cssrem convertem pelo autocompletar e expõem a raiz como configuração (cssrem.rootFontSize, 16 por padrão), então confira se ela bate antes de confiar no resultado em um projeto de 14px. Para um arquivo inteiro, cole-o no campo de conversão em lote acima e defina a base antes. A escala padrão do Tailwind já é baseada em rem com raiz de 16px: uma unidade de espaçamento é 0.25rem (4px), então 16px é 4, 24px é 6 e 40px é 10.
Fontes
Sobre Conversor PX para REM
Converter px, rem, em e pt e rever as substituições CSS.
16px: 24px → 1.5rem = 1.5em = 18pt.
font-size:24px → font-size:1.5rem; border:1px → border:1px (≤2px).
Raiz positiva; magnitude ≤1 mil milhão; seis decimais arredondados. Pré-visualização limitada a 8–72px. CSS ≤100 000 caracteres. Só se convertem tokens px sem aspas nos valores; comentários, cadeias, URLs e content são preservados. Reveja a saída: conversão lexical limitada, não validação CSS. Os números CSS com expoente (como 1e+3px ou 1e-3px) permanecem inteiramente inalterados.
Casos de uso
Como usar
Defina a raiz, edite uma unidade e cole CSS opcionalmente. ≤2px mantém dimensões pequenas; CSV lista pares numéricos convertidos únicos.
Raiz positiva; magnitude ≤1 mil milhão; seis decimais arredondados. Pré-visualização limitada a 8–72px. CSS ≤100 000 caracteres. Só se convertem tokens px sem aspas nos valores; comentários, cadeias, URLs e content são preservados. Reveja a saída: conversão lexical limitada, não validação CSS. Os números CSS com expoente (como 1e+3px ou 1e-3px) permanecem inteiramente inalterados.
Dicas Pro
- Raiz positiva; magnitude ≤1 mil milhão; seis decimais arredondados. Pré-visualização limitada a 8–72px. CSS ≤100 000 caracteres. Só se convertem tokens px sem aspas nos valores; comentários, cadeias, URLs e content são preservados. Reveja a saída: conversão lexical limitada, não validação CSS. Os números CSS com expoente (como 1e+3px ou 1e-3px) permanecem inteiramente inalterados.
- rem = px / tamanho raiz; em assume o mesmo contexto da raiz; pt = px × 0,75 a 96 píxeis CSS por polegada.
Perguntas frequentes
Aqui o contexto em coincide com a raiz. Em CSS depende do tamanho de letra relevante e dos elementos aninhados.
Cadeias, comentários, funções URL e content são preservados. Reveja a folha de estilos; CSS complexo ou incorreto não é validado.