Converter pixels em rem com o tamanho correto da fonte raiz

Para converter pixels CSS em rem, divida o valor em pixels pelo tamanho da fonte do elemento raiz: valor em rem = valor em px ÷ tamanho da fonte raiz em px. Com uma fonte raiz de 16 px, 24 px correspondem a 1,5 rem. Com uma fonte raiz de 20 px, os mesmos 24 px correspondem a 1,2 rem.

O conversor de px em rem faz essa divisão. O campo da fonte raiz começa em 16, mas não lê a sua folha de estilos. Portanto, verifique a base antes de converter um tamanho de texto ou espaçamento.

Encontrar o tamanho da fonte raiz da sua página

Um rem corresponde ao tamanho da letra do elemento raiz, geralmente html. O valor de 16 px é comum, mas não é universal: os estilos do site e as preferências do navegador podem alterá-lo. A MDN explica essa referência da unidade rem.

1. Abra a página do seu projeto no navegador. Inspecione o elemento html com as ferramentas de desenvolvimento.
2. No painel de estilos calculados, procure font-size e anote o valor em pixels. Não use o valor de body nem o do título que deseja converter.
3. Outra opção: na consola dessa mesma página, execute getComputedStyle(document.documentElement).fontSize. Uma resposta “20px” indica uma base de 20 para o conversor.
4. Verifique o valor novamente se uma regra responsiva ou definição mudar o tamanho da fonte raiz. A medição representa a página no seu estado atual.

Esse método usa os estilos realmente aplicados, como esclarece a documentação de getComputedStyle.

Converter e aplicar o valor

1. Introduza 24 no campo de pixels CSS, sem acrescentar px.
2. Introduza a base encontrada, por exemplo, 16. A base deve ser maior que zero; o valor a converter pode ser zero, mas não negativo.
3. Inicie a conversão. A ferramenta mostra “24px ÷ 16px = 1,5rem”. Na apresentação, o resultado usa vírgula decimal; para uma declaração CSS, use o ponto decimal em 1.5rem, por exemplo, “font-size: 1.5rem;”.
4. Verifique a aparência na sua página. Se a fonte raiz for 20 px, use o resultado 1.2rem para obter 24 px. Manter 1.5rem produziria 30 px.

Em português, escrevemos 1,5 numa explicação; o código CSS exige o ponto decimal: 1.5rem. Os pixels dessa conversão são pixels CSS, não os pixels físicos do ecrã. Não aplique nenhum multiplicador relacionado à densidade do ecrã. A MDN detalha essa diferença.

Entender a diferença entre rem e em

As unidades rem permitem partilhar uma referência comum entre componentes. As unidades em acompanham o tamanho da fonte do elemento; numa declaração font-size, acompanham o tamanho da fonte do elemento pai. Por isso, tamanhos de texto em em podem multiplicar-se com o aninhamento. Escolha em se essa dependência do componente for desejada e rem se quiser uma referência à raiz. O módulo CSS Values and Units define essas unidades.

Evitar erros de base e precisão

Não mude o tamanho da fonte raiz só para fazer um cálculo dar certo: isso também alteraria as dimensões em rem já existentes. Em vez disso, corrija a base introduzida e recalcule.

O resultado é arredondado para, no máximo, seis casas decimais. Assim, 17 px com uma fonte raiz de 18 px aparecem como 0,944444rem na ferramenta. No código CSS, escreva 0.944444rem, com ponto decimal. Zeros desnecessários no final não são mantidos.

Um valor muito pequeno pode desaparecer na apresentação: 0.000001 px ÷ 16 produz 0rem após o arredondamento. Isso não significa que o quociente matemático seja zero. Verifique antes de substituir um valor muito pequeno no CSS. Números não finitos e resultados que ultrapassam a faixa numérica suportada são recusados.

Verificar também o redimensionamento do texto

Usar rem não garante acessibilidade. Teste o zoom até 200%, assim como a ampliação do texto e as preferências de fonte: títulos, botões e campos devem continuar legíveis e utilizáveis. Observe se há texto cortado ou sobreposto em contentores rígidos. Uma dimensão em px não é automaticamente inacessível: o zoom da página também a amplia. O critério WCAG 1.4.4 trata do redimensionamento sem perda de conteúdo nem de funcionalidade, não do uso obrigatório de uma unidade.

Perguntas frequentes

Quantos rem equivalem a 16 px?

1rem com uma fonte raiz de 16 px; 0.8rem com uma fonte raiz de 20 px. É preciso conhecer a base para responder.

Preciso converter todos os valores px em rem?

Não. Escolha a unidade conforme o comportamento desejado: acompanhar a tipografia da raiz, a do componente ou manter um comprimento CSS independente da fonte.

Porque é que o meu resultado é diferente do resultado do conversor?

Verifique o tamanho calculado de html, as regras CSS que substituem a sua declaração e o arredondamento. O conversor calcula apenas com base nos dois valores introduzidos.