Também disponível em: English · Español · Français · العربية
Conversor de px para rem
Converta entre px e rem com o tamanho de raiz que quiser, e perceba porque essa raiz é uma decisão e não uma constante.
O que é um conversor de px para rem
Um píxel é um comprimento absoluto. Um rem é relativo: significa o tamanho de letra do elemento raiz, que em qualquer página web é o elemento html. Converter entre os dois é uma divisão — px a dividir pela raiz dá rem, rem vezes a raiz dá px — e a única pergunta é qual é essa raiz na realidade.
Quase todos os conversores respondem 16 e seguem em frente. É o número com que os navegadores vêm, e acerta na maioria das vezes, mas é um valor por omissão do navegador e não algo que a norma exija. O CSS define o valor inicial de font-size como a palavra-chave medium e deixa ao navegador decidir quantos píxeis isso é. A especificação não fixa em lado nenhum um valor em píxeis para tal.
Por isso a raiz aqui é um controlo e não uma constante. Mude-a e a conversão, a tabela de referência e o painel de escala acompanham: é a forma honesta de apresentar uma unidade cujo sentido inteiro é mexer-se.
Como usar o conversor
- Escolha o sentido e escreva o seu valor. De px para rem para passar uma entrega de design, de rem para px para verificar o que uma folha de estilos vai mesmo desenhar. Tudo se actualiza enquanto escreve.
- Defina o tamanho de letra da raiz. Deixe em 16 para igualar o valor habitual do navegador, ou mexa para ver o que a sua folha de estilos faz a quem escolheu texto maior. A tabela em baixo recalcula com o que escolher.
- Leia o painel de escala antes de copiar seja o que for. Mostra o que três declarações de raiz diferentes dão a um leitor em cada definição do navegador, e o painel de em logo abaixo mostra o que acontece se recorrer a em.
Porque se recomenda rem, e como anular a vantagem sem querer
A razão pela qual as orientações de acessibilidade apontam para rem é que herda a decisão do próprio leitor. Quem pôs o texto do navegador em 24px disse-lhe que precisa do texto uma vez e meia maior do que por omissão, e uma maquetação feita em rem dá-lho em todo o lado de uma só vez.
É fácil deitar isso fora numa linha. Escrever html { font-size: 16px } substitui a definição do leitor pela sua. A partir daí todos os rem da página se resolvem contra 16, escolha ele o que escolher, portanto o nosso leitor de 24px recebe exactamente dois terços do que pediu — um terço a menos — e nenhum rem mais abaixo na folha de estilos o recupera. As unidades são relativas; aquilo a que são relativas acabou de se tornar uma constante.
As percentagens não têm esse problema, e é aqui que o folclore se engana. O truque dos 62,5 %, que põe html { font-size: 62.5% } para que 1rem sejam uns cómodos 10px, é muitas vezes descrito como um perigo de acessibilidade. Não é. Uma percentagem multiplica aquilo que o leitor escolheu: na definição dele por omissão dá 10px, com 24px dá 15px, e a página inteira escala com ele exactamente como deve. O que quebra a acessibilidade é a unidade, não o número: px congela, a percentagem escala.
A tabela de escala desta página faz essa conta por si com cinco definições de navegador. A única linha que alguma vez fica curta é a do píxel fixado.
Porque não em, e uma regra da norma que convém saber
em parece intercambiável com rem e comporta-se de forma completamente diferente. em é relativo ao tamanho de letra do elemento em que é usado, portanto aninhar multiplica. Quatro níveis de elementos postos cada um a 1.25em não saem 25 % maiores do que a base: saem a 1,25 elevado a quatro, que são 2,44 vezes, e o último é quase duas vezes e meia o tamanho que julgava estar a especificar. O painel de em acima mostra a cadeia com o factor que escrever.
rem não acumula, porque todos os rem da página são medidos contra a mesma raiz. Essa única diferença é a razão pela qual a unidade foi introduzida, e é a base inteira do conselho habitual: em para o que deva mesmo escalar com o seu contexto local, como o preenchimento de um botão que cresce com a etiqueta, e rem para tudo o que queira previsível.
Há uma regra que convém conhecer porque parece que devia ser circular e não é. Quando rem aparece dentro do próprio font-size do elemento raiz, refere-se ao valor inicial dessa propriedade e não a si mesmo. Portanto html { font-size: 2rem } é o dobro do valor inicial e não recorre a si próprio. É um canto que visitará pouco, mas é comportamento definido e não indefinido.
Limites honestos
Esta ferramenta não lhe pode dizer qual é o tamanho de letra da raiz de um leitor concreto. Nada pode, visto de fora: é para isso que a definição existe. O que pode é mostrar-lhe o que a sua folha de estilos lhe dá em cada valor plausível, para que decida se o seu desenho aguenta.
Os valores em rem são mostrados com quatro casas decimais e não são arredondados mais, porque 15px com uma raiz de 16px são 0,9375rem exactos e 0,94rem é outro tamanho. Quando um valor não cai num número limpo, a ferramenta diz-lho em vez de arredondar à socapa, e todo o valor que mostra volta a converter-se no píxel de que partiu.
Uma coisa fica fora do seu alcance: o zoom do navegador não é o mesmo que uma preferência de tamanho de letra. O zoom amplia tudo, píxeis incluídos, portanto uma maquetação em px também aumenta com o zoom — e é precisamente por isso que pode parecer correcta a quem a testa com zoom e ainda assim falhar ao leitor que mudou o seu tamanho de texto por omissão. São duas definições diferentes e o rem só responde a uma.
Porque é grátis?
Porque uma divisão não nos custa nada. A ferramenta inteira são uns poucos kilobytes de JavaScript a correr no seu próprio navegador: nenhum valor é enviado, nada é guardado e não há servidor nenhum que pudesse ver o que está a desenhar.
Portanto não há conta, nem registo, nem limite. Converta os espaçamentos de um sistema de design inteiro se quiser; é tão grátis à milésima vez como à primeira.