Como usar
- Informe em Tamanho da fonte raiz o tamanho usado no seu CSS, em px.
- Abra a aba CSS, cole seu CSS no editor de entrada e escolha px → rem ou rem → px em Direção.
- Em Propriedades, selecione Todas as propriedades ou Só propriedades de fonte.
- Para preservar bordas finas ao converter px para rem, deixe Manter 1px marcado.
Exemplos
Espaçamento de um cartão com borda de 1px
.cartao {
padding: 24px;
gap: 12px;
border: 1px solid #ccc;
}.cartao {
padding: 1.5rem;
gap: 0.75rem;
border: 1px solid #ccc;
}Converter apenas a tipografia
.aviso {
font-size: 18px;
line-height: 28px;
letter-spacing: 0.5px;
padding: 16px;
}.aviso {
font-size: 1.125rem;
line-height: 1.75rem;
letter-spacing: 0.0313rem;
padding: 16px;
}Voltar um layout de rem para px
.vitrine {
gap: 0.75rem 2rem;
padding: 1.5rem;
}.vitrine {
gap: 12px 32px;
padding: 24px;
}Dicas
- Organize o arquivo convertido com o Formatador CSS.
- Deixe-o menor com o Minificador CSS.
Perguntas frequentes
Quantos pixels equivalem a 1 rem?
1 rem equivale ao tamanho da fonte raiz: com raiz de 16px, 1 rem vale 16px. Para calcular rem, divida os pixels pelo tamanho da fonte raiz; para voltar a px, multiplique.
Qual é a diferença entre rem e em no conversor?
O rem usa Tamanho da fonte raiz (rem = px ÷ raiz); o em usa Tamanho da fonte do elemento pai para em (em = px ÷ pai). Você pode converter valores individuais entre essas unidades, mas valores em em não são convertidos no CSS.
O conversor também altera media queries?
Marque Converter media queries para incluir valores nos parâmetros de @media e @container. Em media queries, rem usa o tamanho padrão do navegador, não a fonte raiz definida no seu CSS.
Preciso revisar valores dentro de calc()?
Revise especialmente expressões com 0px: a ferramenta troca 0px por 0, inclusive dentro de calc(). Isso pode tornar inválida uma soma como calc(0 + 0.625rem).
Meu CSS é enviado para algum servidor?
A conversão acontece no seu navegador, sem enviar os valores ou o CSS, e esse conteúdo não é salvo. O site guarda as configurações e a última aba e usa Google Analytics para eventos de uso, sem incluir os valores ou o CSS.