| px | rem |
|---|
Sobre esta ferramenta
O rem (root em) é uma unidade de comprimento CSS relativa ao tamanho da fonte do elemento raiz <html>, enquanto px é um pixel de dispositivo absoluto. No tamanho de raiz padrão do navegador de 16px, 1rem equivale a 16px, então 24px são 1.5rem e 10px são 0.625rem. Como rem se ajusta ao tamanho da raiz, alterar a base recalcula todos os valores em rem de uma só vez — este conversor permite definir essa base e traduzir os valores em ambas as direções.
Use-o para migrar um design system baseado em px para unidades rem escaláveis, dimensionar a tipografia e os espaçamentos que respeitam a configuração de tamanho de fonte do navegador de um usuário, conferir uma escala do Tailwind ou de tokens de design, ou descobrir por engenharia reversa o valor em pixels por trás de uma declaração em rem na folha de estilo de outra pessoa. A tabela de referência mostra de relance o equivalente em rem dos passos comuns em px na base que você escolheu.
rem é relativo ao tamanho da fonte da raiz (<html>), não ao elemento pai — essa é a única diferença em relação a em, que é relativo ao seu próprio pai.
Perguntas frequentes
Como converto px em rem?
Divida o valor em pixels pelo tamanho da fonte raiz. Na raiz padrão de 16px, 24px ÷ 16 = 1.5rem e 10px ÷ 16 = 0.625rem. Mude a base e o mesmo valor em px corresponderá a um rem diferente.
1rem é sempre 16px?
Somente quando o tamanho da fonte raiz é o padrão do navegador de 16px. 1rem equivale ao font-size definido no elemento <html>, então, se a raiz for 10px, 1rem será 10px.
Qual é a diferença entre rem e em?
rem é sempre relativo ao tamanho da fonte da raiz (<html>), então permanece consistente em toda a página. em é relativo ao tamanho da fonte do seu próprio elemento/pai, de modo que valores em aninhados se acumulam e podem derivar.