Conversor CSS px ↔ rem

O layout chega em px, o projeto usa rem, e você se pega dividindo 24 por 16 de cabeça pela décima vez no dia, ou pior, errando 13 dividido por 16 e chutando 0.8. Esta página faz a conta nos dois sentidos: digite o valor em px e o rem aparece; digite em rem e o px se atualiza. A base do :root é configurável, com o padrão dos navegadores, 16px, já preenchido.

O rem é relativo ao font-size do elemento raiz, e é aí que mora o motivo de ele importar: o padrão é 16px, mas o usuário pode aumentar esse valor nas configurações do navegador, e tudo que estiver em rem escala junto, enquanto o que estiver em px fica travado. Também existe o truque antigo do html com font-size de 62.5%, que faz 1rem valer 10px para facilitar a conta; se o seu projeto usa esse padrão, troque a base para 10 aqui e os valores saem certos.

Use rem em font-size, espaçamentos e larguras que devam acompanhar a preferência de fonte do usuário; px segue fazendo sentido para bordas de 1px e detalhes que não devem escalar. Cuidado para não confundir com em, que é relativo ao elemento e se compõe na herança, enquanto rem aponta sempre para a raiz. O resultado sai sem arredondamento (13px com base 16 dá 0.8125rem) e pode ser copiado inteiro: o navegador aceita quantas casas decimais vierem. Tudo roda localmente.