Converta píxeis em rem com qualquer base

O píxel passa a rem com uma única divisão: o número de píxeis a dividir pelo tamanho de letra base. Com a predefinição do navegador essa base vale 16 px, pelo que 24 píxeis dão 1,5rem e 14 píxeis dão 0,875rem. A unidade rem refere-se ao tamanho de texto do elemento html, a raiz do documento [1].

É o sentido mais frequente no dia a dia. A maqueta chega com medidas em píxeis, porque é assim que os programas de design contam, e a folha de estilos escreve-se em rem para que o layout responda às definições de quem lê.

O resultado traz quatro casas decimais, porque com base de 16 px um único píxel vale exatamente 0,0625rem e os tamanhos de texto produzem números como 0,875 ou 1,125.

Mais abaixo encontra uma tabela com 30 valores em três bases, como automatizar a conversão dentro do projeto e uma revisão de propriedades CSS com a resposta sobre quais passar a rem. O caminho inverso cabe ao conversor de rem para píxeis.

A fórmula tem uma só operação: rem = píxeis ÷ tamanho de letra base. É a inversa da multiplicação que transforma rem em píxeis.

Exemplo com um espaçamento de 20 px: com base de 16 sai 20 ÷ 16 = 1,25rem. Esse mesmo valor com a base de 10 px da técnica dos 62,5% dá 2rem, porque dividir por dez faz-se de cabeça.

As medidas de uma maqueta costumam dar frações: 18 píxeis são 1,125rem, 30 píxeis são 1,875rem e 22 píxeis são 1,375rem. As três são exatas e a maioria dos design systems guarda-as assim, pelo que as escreve tal e qual na folha de estilos.

A unidade em calcula-se da mesma forma, dividindo pelo tamanho de letra do elemento pai em vez do da raiz: esse cálculo cabe ao conversor de píxeis para em. Se a medida seguir para o papel, o mesmo ficheiro cabe ao conversor de píxeis para polegadas.

Para um valor isolado basta o conversor acima. Para uma folha de estilos inteira o cálculo passa para uma ferramenta que o executa sempre que o projeto é compilado.

Num pré-processador escreve uma função que divide o número pela base. Em Sass fica assim: @function rem($px) { @return math.div($px, 16) * 1rem; }, e depois na regra coloca padding: rem(24) e obtém 1.5rem. A base passa a viver num único sítio e muda-se uma vez.

A segunda via trabalha sobre a folha já terminada e deixa intacta a sua forma de escrever. O plugin postcss-pxtorem, ligado ao passo de compilação, percorre o ficheiro de saída e troca os píxeis por rem conforme a base configurada. Nos últimos 30 dias o registo npm contabilizou mais de 870.000 transferências [2].

A terceira via são as variáveis CSS. Escreve --space-6: 1.5rem uma vez na folha e depois invoca o nome em vez do número. A conversão passa a acontecer uma só vez, ao definir a escala, e não em cada regra.