Converter rem em px Root em ↔ Pixels Grátis Online Seguro
Escreva um valor em rem e leia-o de imediato em px. A conta faz-se no seu navegador, nada é enviado para lugar nenhum, e aquilo de que o resultado depende está escrito mais abaixo em vez de ser presumido.
Nada é enviado
Tamanhos habituais — Converter rem em px
| rem | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
De onde vêm estas unidades
O pixel do CSS não é o pixel do seu tela. Quando as telas deixaram de ter uma densidade previsível, uma página medida em pixels verdadeiros tornou-se uma página que encolhia à medida que as telas ficavam mais finos; redefiniu-se então o pixel CSS como um comprimento de referência: cerca de 1/96 de polegada, visto a uma distância cómoda de leitura. Todo o resto desta página assenta nisso. O em é mais velho do que a web — nos tipos de chumbo era a largura de um bloco fundido, chamado assim por causa do M maiúsculo — e em CSS significa o tamanho de letra em vigor, razão pela qual muda ao aninhar elementos. O rem foi acrescentado precisamente para escapar a isso: é o em do elemento raiz e nunca se compõe. O vw chegou com o desenho adaptativo: um centésimo da largura da janela, seja ela qual for.
Onde as encontra
Estas são as unidades de qualquer planilha de estilo. Os pixels dimensionam contornos, sombras e tudo o que não deve escalar; o rem dimensiona a gráfica, os espaçamentos e a disposição, de modo que uma única alteração na raiz redimensiona uma interface inteira; o em dimensiona o que deve seguir o seu próprio texto, como o enchimento de um botão; o vw dimensiona títulos e cabeçalhos que têm de preencher o tela em qualquer aparelho. Converter entre eles é a aritmética diária de transformar uma maquete entregue em pixels numa planilha de estilo que escala.
Perguntas frequentes
Porque é 16 px o ponto de partida habitual?
Porque é o tamanho de texto por padrão em todos os navegadores importantes, e uma planilha de estilo que não o substitui herda-o. Um rem equivale portanto a 16 px na definição por padrão, e daí vêm as conversões familiares: 0,5 rem são 8 px, 1,5 rem são 24 px. Se um usuário aumentou esse valor nas definições do navegador, esses mesmos valores em rem crescem com ele — que é precisamente para isso que servem.
Devo usar rem ou em?
Rem para tudo o que deva seguir a página no seu todo — escala tipográfica, espaçamentos, larguras de disposição — porque se mede a partir da raiz e nunca se acumula. Em para tudo o que deva seguir o texto em que se encontra: o enchimento de um botão, o espaço junto a um ícone, o avanço de uma citação. O erro comum é aninhar elementos dimensionados em em: 1,2 em dentro de 1,2 em torna-se 1,44, depois 1,73, até o texto no fundo da página ter o dobro do tamanho pretendido.
O resultado é exato?
Onde as duas unidades se definem uma pela outra com números inteiros, sim — a página informa isso acima do número, e o único arredondamento está em quantos dígitos se mostram. Onde a razão não tem decimal finita, a página mostra doze algarismos significativos e diz que a relação é aproximada, em vez de fingir o contrário.
Alguma coisa que escrevo sai do meu aparelho?
Não. A aritmética roda no seu navegador; nada é enviado, e nem sequer há servidor para o receber. Carregada uma vez, a página continua funcionando com a rede desligada.
Por que você precisa converter rem em px
Você abre uma folha de estilos e vê padding: 2.25rem num cartão e font-size: 0.8125rem numa legenda. São bons valores, escritos do jeito que o CSS moderno deve ser escrito, e não dizem nada de relance. Quão grande é esse preenchimento do cartão na tela? A legenda será legível? Combina com os 36 px e os 13 px do arquivo de design que lhe entregaram? Para responder, você converte rem em px: multiplica pelo tamanho de fonte da raiz e lê a resposta na unidade que as ferramentas de design usam. É o inverso do sentido habitual, e é o que você faz quando lê código, confere um mockup contra uma versão pronta ou explica um layout a alguém que pensa em pixels.
A conversão é fácil; o que a faz merecer uma página é a base. Um rem não é um tamanho, é um múltiplo de um tamanho, o tamanho de fonte do elemento raiz. Num navegador a que ninguém disse outra coisa esse tamanho é 16 px, então 1 rem são 16 px, 2,25 rem são 36 px e 0,8125 rem são 13 px. Mas a raiz pode ser mudada pela folha de estilos, e o leitor pode mudá-la no navegador, e então todo valor em rem da página se move junto. A página, portanto, pede a base e a usa, em vez de escondê-la.
O cálculo acontece no seu navegador, e nada é enviado. Abaixo você encontra a fórmula, uma tabela de valores comuns, o que a conversão mantém e o que não consegue manter, as situações em que os desenvolvedores precisam converter rem em px e alguns hábitos que mantêm fácil de ler uma folha de estilos baseada em rem.
A fórmula e a base
px é igual a rem multiplicado pela base
A fórmula é uma multiplicação: px = rem × base. Com a base usual de 16 px, 1,5 rem viram 24 px, 0,75 rem viram 12 px e 4 rem viram 64 px. A página imprime a base ao lado do resultado, então uma linha como 1,5 rem = 24 px (16 px) diz o que foi presumido e você vê de imediato se combina com o seu projeto.
Descobrindo a sua base
Procure na folha de estilos uma regra em html ou :root que defina o font-size. Se não houver, a base é o padrão do navegador, de 16 px. Se houver, como 62,5%, tome essa porcentagem de 16: 62,5% dá 10 px. Nas ferramentas de desenvolvedor do navegador você também pode selecionar o elemento raiz e ler o tamanho de fonte calculado dele, que é o número a digitar no campo da base.
Quando o tamanho da raiz é fluido
Alguns sites fazem o tamanho da raiz crescer com a janela, usando uma expressão clamp. Então 1 rem não tem valor único em pixels: são 15 px num celular e 18 px num monitor largo. Nesse caso qualquer conversão é um instantâneo. Digite a base que você vê na largura que lhe interessa e entenda que a resposta vale só nessa largura.
O que a conversão mantém e o que não consegue
Mantém a proporção
Um rem é o que for o tamanho de fonte da raiz, então um layout escrito em rem mantém a forma quando esse tamanho muda. Quando você converte rem em px, o valor em pixels é essa mesma proporção tornada concreta para uma base em particular. A razão entre dois tamanhos, por exemplo um título de 2 rem sobre um texto de corpo de 1 rem, não muda por mais que você a converta, e essa razão é aquilo de que um bom layout depende.
Não consegue saber as configurações do seu leitor
O número depende inteiramente da base. Se o leitor aumentou o tamanho de texto padrão do navegador, o que muita gente faz e tem direito de fazer, então 1 rem não são 16 px para ele, e o número que você vê só está certo para a base do campo. Trate o valor em pixels como um modo de entender o design, e não como uma promessa do que todo visitante verá.
Arredondamento
Como a base costuma ser um número inteiro, o resultado da multiplicação costuma ser exato. 0,8125 rem são exatamente 13 px numa base de 16; 0,6875 rem são exatamente 11 px. Se você obtém um decimal longo, é sinal de que o valor em rem foi calculado a partir de uma base diferente da que você digitou.
Valores comuns
A tabela no pé da página
A página inclui uma tabela dos valores em pixels a que correspondem os números comuns em rem na base que você definiu: 0,5 rem são 8 px, 0,625 são 10, 0,75 são 12, 0,875 são 14, 1 são 16, 1,125 são 18, 1,25 são 20, 1,5 são 24, 2 são 32, 3 são 48 e 4 são 64. São os valores que mais aparecem em espaçamento e escalas tipográficas, e saber de cor torna uma folha de estilos legível de relance.
Lendo uma folha de estilos em pixels
Um exercício útil é pegar uma folha de estilos que você não escreveu e traduzir seus principais valores em pixels uma vez, anotando os resultados. Um tamanho de corpo de 1 rem, títulos de 1,5 e 2,25 rem, um vão de contêiner de 2 rem: em pixels, 16, 24, 36 e 32. Visto assim, a lógica do design aparece, e você pode compará-la com o arquivo de design sem calculadora.
Como converter rem em px aqui
Digite o valor em rem
Digite o tamanho em rem no primeiro campo. Decimais são aceitos, então 0,8125 funciona tão bem quanto 1.
Defina a base
Deixe em 16 se o seu CSS não muda o tamanho da raiz. Mude se mudar. O resultado se atualiza enquanto você digita.
Leia o valor em pixels
A resposta aparece na hora, com a base mostrada ao lado, para que você saiba o que foi presumido. Copie-a para as suas notas ou compare-a com o arquivo de design.
De onde vêm essas unidades
O pixel do CSS
Quando as telas deixaram de ter uma densidade previsível, uma página medida em pixels reais passou a ser uma página que encolhia à medida que as telas ficavam mais nítidas. Então o pixel do CSS foi redefinido como um comprimento de referência: cerca de 1/96 de polegada visto a uma distância confortável de leitura. Um pixel numa folha de estilos não é, portanto, um ponto na sua tela, mas uma unidade de comprimento que o navegador mapeia em quantos pontos a tela precisar.
O rem
O em é mais antigo que a web: nos tipos de metal era a largura de um bloco fundido, com o nome da letra M maiúscula, e no CSS significa o tamanho de fonte em vigor, e é por isso que muda conforme você aninha elementos. O rem foi acrescentado para escapar exatamente disso: é o em do elemento raiz e nunca se acumula. Para ver a diferença em números, converta px em em e compare com o que você obtém quando converte rem em px.
Quando os desenvolvedores convertem rem em px
Conferindo uma versão pronta contra um arquivo de design
Um designer entrega um arquivo em pixels; o desenvolvedor escreveu o código em rem. Para conferir se a página combina, ele converte rem em px e compara os números. Uma diferença aparece de imediato: 1,375 rem são 22 px, e se o design diz 24, um dos dois está errado.
Lendo código desconhecido
Quando você herda uma folha de estilos, os valores em rem escondem os tamanhos reais. Converter um punhado dos principais dá um mapa do design: quão grande é o texto, quão largas são as margens laterais, onde caem os pontos de quebra.
Escrevendo relatórios de bugs e documentação
Quem testa uma página descreve o que vê em pixels. Um desenvolvedor que diz que o preenchimento é de 2,5 rem diz pouco a um testador; 40 px diz algo. Converter faz os dois lados se entenderem.
Definindo valores que precisam ser exatos em pixels
Algumas coisas precisam ser um número exato de pixels do dispositivo ou ficam borradas: uma borda de um pixel, um ícone desenhado numa grade de 24 px. Se um tamanho precisa cair na grade de pixels, converter rem em px diz se cai na sua base.
Armadilhas ao converter rem em px
Esquecer um tamanho de raiz alterado
Se a raiz está definida como 62,5% ou como uma expressão clamp, o fator padrão de 16 não vale. O resultado fica errado pela razão entre as duas bases. Confira sempre a base primeiro.
Confundir rem com em
O em é relativo ao tamanho de fonte do próprio elemento, e não ao da raiz. Um valor de 1.5em dentro de um título de 24 px são 36 px, mas dentro de um parágrafo de 16 px são 24 px. Esta página converte rem, que não tem essa ambiguidade. Para em, veja em em px.
Presumir que a tela mostra os mesmos pixels
Um pixel do CSS não é um pixel do dispositivo. Numa tela de alta densidade um pixel do CSS pode ser dois ou três pixels do dispositivo. A conversão dá pixels do CSS, que é o que as ferramentas de design e a folha de estilos usam.
Arredondar cedo demais
Se você arredonda 13,333 px para 13 e depois converte de volta, obtém 0,8125 rem, e não os 0,8333 com que começou. Guarde o valor original em rem quando isso importar.
Perguntas que as pessoas fazem antes de converter
Quantos pixels são 1 rem?
Dezesseis, num navegador cujo padrão não foi alterado.
Quantos pixels são 2 rem?
Trinta e dois na base padrão. Numa base de 10 seriam 20.
Por que o meu navegador mostra algo diferente?
A configuração do leitor ou uma regra da folha de estilos mudou o tamanho da raiz. Olhe o tamanho de fonte calculado do elemento raiz nas ferramentas de desenvolvedor.
Rem é o mesmo que em?
Não. O rem se refere ao elemento raiz e o em se refere ao próprio elemento.
O meu número é enviado?
Não. A aritmética roda no seu navegador e nada é enviado a lugar nenhum.
Como volto?
Com px em rem, que divide em vez de multiplicar.
Hábitos que tornam fácil de ler uma folha de estilos em rem
Escreva o valor em pixels num comentário
Uma linha como gap: 1.5rem; /* 24px */ custa alguns caracteres e poupa ao próximo leitor uma conversão. Também registra a base que você presumiu.
Use uma escala pequena
Um projeto que usa só um punhado de valores em rem, como 0,5, 1, 1,5, 2 e 3, é fácil de aprender: depois de um dia você os sabe em pixels sem pensar. Quando você converte rem em px para uma folha de estilos assim, está só confirmando o que lembra.
Dê nomes aos seus valores
Com propriedades personalizadas, como --space-md: 1.5rem, a folha de estilos descreve intenção em vez de números. O nome carrega o significado, e o número fica num só lugar.
Teste com um tamanho padrão diferente
Aumente o tamanho de texto padrão no seu navegador e olhe a página. Se ela se sustenta, o layout foi realmente construído em rem. Se quebra, algo ficou em pixels.
Usando bem o valor em pixels depois de converter rem em px
Compare razões, e não só números
Quando você converte rem em px para uma folha de estilos inteira, olhe as razões entre os tamanhos além dos próprios tamanhos. Uma escala tipográfica em que cada passo é cerca de 1,25 vez o anterior dá 16, 20, 25, 31 e 39 pixels; uma escala de 1,5 dá 16, 24, 36 e 54. Perceber a razão diz o que o designer pretendia, e permite estender a escala de modo consistente quando você precisa de um novo tamanho.
Traduza para quem pensa em pixels
Nem todos numa equipe leem rem. Gerentes de projeto, redatores e clientes muitas vezes trabalham a partir de capturas de tela e pedem que um título fique um pouco maior. Se você pode dizer que o título tem 36 px agora e teria 40 px com 2,5 rem, a conversa é curta. A página é útil como uma ponte rápida entre os dois vocabulários.
Confira alvos de toque e tamanhos mínimos
As diretrizes para telas sensíveis ao toque pedem alvos de pelo menos cerca de 44 px, e as diretrizes para texto pedem corpo de cerca de 16 px ou mais. Ambas são dadas em pixels. Para verificar uma folha de estilos escrita em rem contra elas, converta rem em px e veja se os botões e o texto passam da linha.
Atenção ao caso ampliado
O valor que você obtém é para a base que digitou. Se os seus leitores podem ampliar o texto, tente a conversão de novo com uma base de 20 ou 24 e veja o que o layout pede da tela. Um cartão confortável em 16 pode transbordar em 24, e o melhor momento de descobrir é antes de a página ser publicada.
Conversores relacionados
A mesma família de ferramentas cobre as conversões vizinhas. Para voltar a rem, use px em rem. Para tamanhos relativos ao elemento, há px em em e em em px, e para tamanhos relativos à tela, px em vw e vw em px. Para as cores da mesma folha de estilos, HEX em RGB e HSL em HEX estão à mão, e para nomes de classe, texto em kebab-case transforma uma frase num nome que o CSS aceita.
Um exemplo resolvido
Digamos que você esteja revisando um pull request e a folha de estilos tenha uma seção de destaque com padding: 5rem 1.5rem, um título de 3.5rem e um parágrafo de abertura de 1.25rem. O arquivo de design diz 80 px e 24 px de preenchimento, um título de 56 px e uma abertura de 20 px. Você digita 5 e lê 80 px, digita 1,5 e lê 24, digita 3,5 e lê 56, digita 1,25 e lê 20. Os quatro combinam, então a versão pronta é fiel. Se o título tivesse sido 3,25 rem, você teria lido 52 e notado a diferença antes que chegasse ao designer.
Uma lista de conferência rápida
Antes de converter
Descubra a base: a regra da raiz na folha de estilos, ou o tamanho calculado nas ferramentas de desenvolvedor.
Durante a conversão
Digite o valor em rem, confira a base mostrada ao lado do resultado e anote o número em pixels.
Depois de converter
Compare com o arquivo de design. Se os números diferem, confira a base antes de suspeitar do código.
Erros comuns
Usar 16 sem conferir
É o padrão, e não uma regra. Confira a raiz.
Tratar os pixels como definitivos
A resposta vale para uma base. Um leitor com um padrão maior vê pixels maiores.
Misturar rem e em
Parecem iguais e se comportam de modo diferente. Use a página certa para cada um.
Seus números ficam no seu dispositivo
O cálculo acontece localmente. Seus valores são usados pelo seu próprio navegador e nada é enviado a lugar nenhum. Não há nada a apagar depois nem conta a criar. Esse é o jeito simples de converter rem em px.
Resumo
Para converter rem em px aqui, digite o tamanho em rem e leia-o em pixels na hora, usando a fórmula px = rem × base. A base começa em 16 px, o padrão de um navegador, e você pode mudá-la para combinar com o seu CSS. A conversão mantém a proporção, já que um rem é o que for o tamanho de fonte da raiz, e não consegue saber as configurações do seu leitor, então o número só está certo para a base do campo. A tabela de valores comuns, de 0,5 rem a 8 px até 4 rem a 64 px, ajuda a ler uma folha de estilos de relance. Nada é enviado.