Converter px para rem

Escreva um valor em qualquer unidade e obtenha a sua equivalência nas restantes. Por predefinição, 1rem = 16px, o tamanho de letra dos navegadores; altere-o se o seu CSS usar outro. Também pode colar um bloco de CSS e converter todos os px para rem de uma só vez.

Conversor de unidades

px
px
px
rem é relativo ao tamanho de letra do elemento raiz (html); em e % ao do elemento pai; 1pt = 1/72 de polegada = 1,333px; 1vw = 1% da largura da janela.

Tabela de equivalências

pxremempt%

Converter um bloco de CSS de px para rem

px, rem e em: qual usar?

O píxel (px) é uma medida fixa. O rem («root em») é relativo ao tamanho de letra do elemento html, que em todos os navegadores é 16px, a não ser que o utilizador o altere: por isso 1rem = 16px, 1,5rem = 24px e 0,875rem = 14px. O em é relativo ao tamanho de letra do elemento pai, pelo que se acumula ao aninhar elementos.

Usar rem para tamanhos de letra, margens e espaçamentos respeita a configuração das pessoas que aumentam o tamanho de letra do navegador por problemas de visão, algo que as diretrizes de acessibilidade WCAG recomendam. Os px continuam a ser práticos para limites finos e sombras.

Fórmula para passar de px para rem

rem = px ÷ tamanho base. Com a base predefinida de 16px: 24px ÷ 16 = 1,5rem. E ao contrário, px = rem × 16. Alguns projetos definem html { font-size: 62.5%; } para que 1rem valha 10px e as contas sejam mais fáceis; nesse caso, escreva 10 como tamanho base.

vw e vh correspondem a 1% da largura e da altura da janela: úteis para tipografia fluida em conjunto com clamp(), por exemplo font-size: clamp(1rem, 2.5vw, 2rem).