O que faz
Esta ferramenta converte medidas CSS entre pixels e as unidades relativas rem e em. Digite um valor como 24px para obter 1.5rem, liste vários valores um por linha para convertê-los de uma vez ou cole uma folha de estilos inteira e todos os valores px serão reescritos no lugar. Uma tabela de referência mostra os tamanhos comuns de 1px a 128px no seu tamanho base. Nada sai do seu navegador.
Como usar
- Cole CSS ou digite valores um por linha. Números sem unidade são lidos como px (ou como rem/em quando a direção é invertida), e um valor escrito na outra unidade é convertido no sentido contrário.
- Ajuste o Tamanho de fonte base. Todos os navegadores usam 16px por padrão; alguns projetos definem
html { font-size: 62.5% }para que 1rem = 10px. - Escolha a Direção (px → rem ou rem → px), a Unidade (rem ou em) e quantas Casas decimais manter.
- Se quiser, use Manter valores abaixo de para deixar bordas de 1px e outras linhas finas em px.
- Copie o resultado com o botão acima dele.
Exemplo
/* before */
.title { font-size: 24px; margin-bottom: 12px; }
/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }Valores que não são px, como porcentagens, cores, nomes de arquivo em url() e classes como .mt-16px, não são alterados. 0px vira 0.
px, rem e em
- px é uma unidade absoluta: ignora o tamanho de fonte preferido do leitor.
- rem («root em») é um múltiplo do tamanho de fonte do elemento
html. Se o leitor configurar o navegador para 20px, 1rem passa a ser 20px e todo o layout acompanha. - em é um múltiplo do tamanho de fonte do elemento atual. É prático para espaçamentos que devem seguir o próprio texto, mas valores em em aninhados se multiplicam, por isso rem é o padrão mais seguro.
As media queries também são convertidas: @media (min-width: 768px) vira 48rem (ou 48em), o que mantém os breakpoints coerentes quando o leitor amplia o texto. Nas media queries, rem e em se referem ao tamanho de fonte padrão do navegador, não à sua regra html.
Perguntas frequentes
› Como converter px para rem?
Divida o valor em pixels pelo tamanho de fonte raiz. Com o padrão dos navegadores, 16px, 24px ÷ 16 = 1.5rem e 12px ÷ 16 = 0.75rem. Para voltar, multiplique: 2rem × 16 = 32px.
› Qual a diferença entre rem e em?
rem é relativo ao tamanho de fonte do elemento raiz html, então 1rem tem o mesmo tamanho em toda a página. em é relativo ao tamanho de fonte do elemento atual (ou do pai, no próprio font-size), por isso se multiplica quando os elementos estão aninhados. Use rem para quase tudo e em quando algo deve acompanhar o próprio texto, como o padding de um botão.
› Por que usar rem em vez de px?
Quando o leitor aumenta o tamanho de fonte padrão nas configurações do navegador, medidas em rem crescem junto, enquanto px ficam fixos. rem mantém o layout acessível e permite escalar todo o design mudando um único valor raiz.
› Devo converter bordas de 1px?
Normalmente não. Uma linha de 0.0625rem pode ficar borrada ou sumir em alguns níveis de zoom. Defina «Manter valores abaixo de» como 2px e o conversor mantém bordas e outros valores minúsculos em px.