nicetool.dev logo

Conversor de PX para REM

Digite em qualquer campo. Clique numa linha da tabela para carregá-la ou cole CSS abaixo para converter tudo.

24px = 1.5rem = 18pt = 150%

Tabela de conversão (base 16px)

pxrempt
1px0.0625rem0.75pt
2px0.125rem1.5pt
4px0.25rem3pt
6px0.375rem4.5pt
8px0.5rem6pt
10px0.625rem7.5pt
12px0.75rem9pt
14px0.875rem10.5pt
16px1rem12pt
18px1.125rem13.5pt
20px1.25rem15pt
24px1.5rem18pt
28px1.75rem21pt
32px2rem24pt
36px2.25rem27pt
40px2.5rem30pt
48px3rem36pt
56px3.5rem42pt
64px4rem48pt
72px4.5rem54pt
80px5rem60pt
96px6rem72pt
128px8rem96pt

Converter um trecho de CSS

6 valores convertidos
.card {
  padding: 1.5rem 2rem;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

Qual a diferença entre px e rem?

O px é uma unidade CSS fixa, enquanto 1rem equivale ao tamanho de fonte do elemento raiz html, 16px por padrão em todos os navegadores. Usar rem para texto, espaçamentos e layout faz tudo escalar junto quando o usuário aumenta o tamanho padrão da fonte nas configurações do navegador, um requisito importante de acessibilidade (WCAG 1.4.4, Redimensionar texto). A conta é simples: rem = px / fonte raiz, então 24px são 1,5rem com base 16px. O em funciona igual, mas em relação à fonte do elemento pai, e se acumula quando os elementos são aninhados.

Recursos

  • • Conversão de px e rem nos dois sentidos com fonte raiz personalizada
  • • Mostra também os equivalentes em pt e porcentagem
  • • Tabela de tamanhos comuns de 1px a 128px, clicável
  • • Conversor em lote que reescreve todos os px de um trecho de CSS
  • • Opção para manter em px as bordas finas de 1px

Roda localmente

Todas as conversões acontecem no navegador, inclusive o CSS que você cola. Nada é enviado.

Cálculo instantâneo, 100% no cliente.

Como usar: PX para REM

  1. 1

    Confira o tamanho da fonte raiz: deixe 16px, a menos que o projeto defina outro valor em html { font-size }, como 10px ou 62,5%.

  2. 2

    Digite um valor no campo px para obter rem, ou no campo rem para obter px. A linha abaixo mostra também pt e porcentagem.

  3. 3

    Clique em qualquer linha da tabela para carregar tamanhos comuns de 1px a 128px.

  4. 4

    Cole um bloco de CSS no conversor em lote: todo px vira rem, 0px vira 0 e bordas de 1px podem continuar em px. Copie o resultado para a folha de estilos.

Exemplos práticos

Escala tipográfica

Uma escala de 14 / 16 / 20 / 24 / 32px vira 0,875 / 1 / 1,25 / 1,5 / 2rem, então os títulos crescem quando o usuário aumenta o texto no navegador.

Migrar uma folha de estilos antiga

Cole o CSS legado em px e converta paddings, margens e tamanhos de fonte de uma vez; depois revise as media queries e mantenha as bordas finas em px.

Seguir um design do Figma

Designers entregam medidas em px. Converta tokens de espaçamento como 4, 8, 12, 16 e 24px em 0,25, 0,5, 0,75, 1 e 1,5rem para um design system.

O truque dos 62,5%

Alguns projetos usam html { font-size: 62.5% } para que 1rem = 10px. Defina a raiz como 10 e 24px viram fáceis 2,4rem.

Perguntas frequentes

Devo usar rem ou px?+

Use rem para tamanhos de fonte e a maioria dos espaçamentos, assim o layout respeita a preferência de fonte do usuário. O px continua bom para bordas, sombras e detalhes finos.

Qual a diferença entre rem e em?+

O rem depende da fonte do html raiz e é previsível. O em depende do elemento pai, então valores em aninhados se multiplicam: útil em componentes, mas fácil de errar.

A base é sempre 16px?+

É o padrão em todos os navegadores, mas o usuário pode mudar e o CSS pode sobrescrever no html. Converta sempre com o tamanho raiz que o projeto realmente usa.

Media queries devem usar rem?+

Media queries em em ou rem dependem da fonte padrão do navegador, não da sua regra html, e se adaptam quando o usuário amplia o texto. Por isso muitas equipes usam em nelas.