Como usar
- Defina o tamanho da fonte raiz se o seu site o alterar (por exemplo, html { font-size: 62.5% } define o valor como 10px).
- Digite um valor em qualquer um dos campos para converter px em rem ou rem em px. Mude para em se quiser usar o tamanho relativo ao elemento pai.
- Use a tabela para consultar valores rapidamente ou cole um trecho de CSS para converter todos os comprimentos em px de uma vez e copiar o resultado.
Como funciona
rem = px ÷ tamanho da fonte raiz. Com o tamanho raiz padrão de 16px, 24px são 1.5rem e 14px são 0.875rem. em usa a mesma fórmula, mas com o tamanho da fonte do elemento pai, por isso os valores de em aninhados se multiplicam. rem evita isso, pois sempre se baseia na raiz.
Usar rem em tamanhos de fonte e espaçamentos permite que o texto aumente quando alguém eleva o tamanho de fonte padrão nas configurações do navegador, o que ajuda pessoas com baixa visão. Os valores são arredondados para quatro casas decimais.
O conversor de trechos substitui números seguidos de px. Ele não altera comentários, url(…) nem strings entre aspas, mantém 1px se você pedir (bordas finas geralmente devem continuar com 1px), converte 0px em 0 e, por padrão, não altera condições @media e @container, pois, em media queries, rem e em sempre se referem ao tamanho de fonte inicial do navegador, independentemente do tamanho de fonte raiz definido por você. Ele não interpreta a semântica de calc() além de substituir os números em px dentro dela, o que continua correto, pois cada comprimento é convertido individualmente.
Exemplos
Tamanho raiz padrão
Com uma raiz de 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
O truque dos 62,5%
Se o CSS definir html { font-size: 62.5% }, a raiz será 10px, então 14px = 1.4rem e 24px = 2.4rem. Defina o tamanho da fonte raiz como 10 para corresponder.
Convertendo um componente
padding: 24px 16px; border: 1px solid #ddd; se torna padding: 1.5rem 1rem; border: 1px solid #ddd; com a opção “Manter valores de 1px” ativada.
Perguntas frequentes
Devo usar rem ou em?
Use rem na maioria dos tamanhos de fonte, espaçamentos e layouts, pois seu comportamento é previsível em todos os casos. Use em quando algo precisar escalar com o tamanho do texto do próprio componente, como o preenchimento interno de um botão.
Por que não converter media queries para rem?
Você pode, mas, em uma media query, 1rem sempre equivale ao tamanho de fonte padrão do navegador (geralmente 16px), não ao font-size de html. Por isso, o conversor as ignora por padrão. Desative a opção se preferir dividir por 16 mesmo assim.
rem é melhor que px para acessibilidade?
Para tamanhos de fonte, sim: rem respeita a configuração de tamanho de fonte padrão do usuário, enquanto tamanhos de fonte em px a ignoram. O zoom do navegador funciona com as duas unidades.
Privacidade
As conversões e o trecho de CSS são processados no seu navegador e nunca são enviados a lugar algum.