Cole o CSS e defina quantos pixels valem 1rem. Só os comprimentos das declarações são convertidos; seletores, textos, comentários e url() ficam como estão.
Funciona localmente no seu navegadorCole uma folha de estilos e defina quantos pixels valem 1rem. A página reescreve os comprimentos em px e mostra o resultado com a mesma etapa de formatação de sempre: nada é enviado.
A divisão é exata: 16px com base de 16px são 1rem, 1.5px vira 0.09375rem e uma base como 16.5px é usada como escrita, sem arredondamento.
Os comprimentos são convertidos dentro dos valores das declarações — padding, width, font-size, expressões calc(), propriedades personalizadas — e das consultas media, container e supports. O valor conta quando um número é seguido da unidade px, em qualquer caixa: 10PX também converte.
Valores fracionários convertem como escritos: 1.5px vira 0.09375rem com base de 16px e .5px vira 0.03125rem. O resultado é o quociente exato enquanto a divisão termina; um quociente periódico, como 10px com base de 16.5px, é arredondado para doze casas decimais.
Seletores, nomes de classe, textos, comentários e o conteúdo de url() passam intactos, então content: "10px", .a10px e url(icon-10px.png) sobrevivem à conversão.
A ferramenta converte valores px para rem e nada além disso. Um valor em rem fica como está, não existe a direção rem para px, e outras unidades como em, %, vw ou pt não são tocadas.
Uma folha vazia, uma base vazia, uma base zero ou negativa e uma base que não seja número são recusadas: a mensagem aparece na linha de status abaixo dos controles e o resultado anterior é apagado para que uma conversão antiga não passe por nova.
Um CSS sem nenhum valor px é indicado como tal e mesmo assim o CSS formatado é exibido. A formatação continua a mesma: minificada quando a entrada tem uma linha, indentada quando tem mais. As mensagens seguem o idioma da página: inglês, espanhol, português (Brasil), alemão, francês ou japonês.