Conversor de PX para REM + tabela completa de 1 a 128px | We.Inc
Converta px para rem e rem para px com qualquer tamanho de fonte raiz. Tabela completa de 1 a 128px com classes Tailwind, um conversor de blocos CSS e um assistente de clamp() fluido.
Conversor de PX para REM
Para transformar pixels em rem, divida o valor em pixels pelo tamanho da fonte raiz. Com o padrão do navegador de 16px, 24px são 1.5rem e 12px são 0.75rem. Digite um valor em qualquer uma das caixas para converter nos dois sentidos, mude o tamanho raiz se o seu site usa outra base, ou cole regras CSS inteiras.
Tamanhos comuns com a raiz padrão de 16px
Pixels
Uso típico
Legendas, rótulos pequenos
Texto secundário, botões
Texto do corpo
Texto do corpo grande, títulos pequenos
Títulos de seção, padding de cards
Títulos de página, espaços entre seções
Títulos de banner
Um conversor nos dois sentidos com tamanho raiz personalizado, uma tabela completa de 1 a 128 pixels com a classe Tailwind correspondente, um conversor de blocos CSS inteiros e um assistente que escreve tamanhos fluidos com clamp().
Defina o tamanho da fonte raiz. Deixe em 16, a menos que a sua folha de estilos defina outro tamanho no elemento html.
Digite na caixa de pixels para obter rem, ou na caixa de rem para obter pixels. As duas se atualizam enquanto você digita.
Role a tabela para encontrar qualquer tamanho de 1 a 128 pixels. Clique em uma linha para copiar o valor em rem.
Cole CSS no conversor de blocos para trocar todos os valores em px por rem de uma vez. Zero vira 0, e bordas de 1px continuam em pixels, a menos que você desmarque essa opção.
Use o assistente de clamp() para obter um tamanho de fonte que cresce suavemente entre a largura de um celular e a de um desktop.
Mantenha o tamanho de fonte do html em 100% (o padrão do navegador) em vez de defini-lo como 62.5%. O truque dos 62.5% faz 1rem valer 10px, mas encolhe todo componente de terceiros que pressupõe 16px.
Use rem para tamanhos de fonte e para a maior parte dos espaçamentos, assim o layout inteiro escala quando alguém aumenta o tamanho padrão de texto do navegador.
Deixe bordas finas e deslocamentos de box-shadow em px. Uma borda de 1px que vira 0.0625rem pode ficar borrada ou sumir em alguns níveis de zoom.
Media queries em em ou rem também seguem a configuração de fonte do usuário. A maioria dos navegadores trata 1em em uma media query como o tamanho padrão do navegador, não como a sua regra no html.
Perguntas frequentes
Quantos pixels tem 1rem?
1rem é igual ao tamanho de fonte do elemento raiz html. Os navegadores definem esse valor como 16px por padrão, então 1rem são 16px, a menos que o site ou o visitante mude isso. Se um visitante define o tamanho padrão de texto como 20px, 1rem passa a ser 20px em qualquer site que não tenha fixado o tamanho raiz em pixels.
Qual é a diferença entre rem e em?
rem é sempre relativo ao tamanho de fonte do html raiz. em é relativo ao tamanho de fonte do próprio elemento (ou do seu pai, quando usado em font-size). Tamanhos em em aninhados se multiplicam: uma lista de 1.2em dentro de outra lista de 1.2em acaba com 1.44 vezes a base. rem nunca se acumula, e é por isso que a maioria dos design systems o usa.
Devo usar px ou rem para tamanhos de fonte?
Use rem. Texto definido em px ignora a configuração de tamanho de fonte padrão do navegador, que algumas pessoas aumentam para ler com conforto. O zoom da página continua funcionando com px, mas a preferência de tamanho de fonte não, então rem é a escolha mais acessível.
Como as classes do Tailwind correspondem a rem?
Na escala de espaçamento padrão do Tailwind, cada passo vale 0.25rem, que são 4px com uma raiz de 16px. Então p-4 é 1rem (16px) e gap-6 é 1.5rem (24px). Os tamanhos de fonte usam nomes: text-sm é 0.875rem e text-base é 1rem. A tabela desta página mostra a classe de cada tamanho que está na escala padrão.
Esta ferramenta envia o meu CSS para algum lugar?
Não. Todas as conversões rodam no seu navegador, e nada do que você digita ou cola é enviado.
Por que o rem existe
Pixels no CSS são unidades fixas. Um título definido em 32px continua com 32px mesmo quando o visitante pediu ao navegador para usar texto maior. A unidade rem resolve isso ligando os tamanhos ao tamanho da fonte raiz, que por padrão segue a configuração do visitante. Mude um número e todo tamanho baseado em rem na página escala junto.
Isso faz do rem uma boa escolha para tipografia, padding, margens e larguras de colunas de texto. Pixels ainda fazem sentido para coisas que não devem escalar com o texto, como um divisor de 1px ou o tamanho de uma imagem com dimensões fixas em pixels.
rem e em lado a lado
O exemplo ao vivo desta página define o mesmo tamanho 1.25 em três níveis de profundidade, uma vez em em e outra em rem. A versão em em cresce a cada nível porque cada filho multiplica o tamanho do pai. A versão em rem fica igual em qualquer profundidade porque sempre olha para a raiz.
em ainda é útil quando algo deve escalar com o próprio texto, como o padding dentro de um botão ou o espaço depois de um ícone. Defina o tamanho de fonte do botão em rem e o padding em em, e mudar o tamanho da fonte redimensiona o botão inteiro.
Tamanhos fluidos com clamp()
clamp(min, preferred, max) escolhe o valor preferido, mas nunca fica abaixo do mínimo nem acima do máximo. Usar uma mistura de rem e vw no valor preferido faz um título crescer suavemente com a largura da janela e ainda respeitar o tamanho de fonte do usuário.
O assistente calcula a reta entre dois pontos, por exemplo 32px em um celular de 375px de largura e 56px em um desktop de 1280px, e a escreve como uma expressão de rem mais vw. Teste o resultado em algumas larguras, porque inclinações de vw muito grandes podem fazer o texto crescer mais rápido que o comprimento da linha.
Converter
Tamanho da fonte raiz (px)
Pixels
(raiz {n}px)
Copiar rem
Copiar px
Raiz {n}px
Converter um bloco CSS
CSS com px
O mesmo CSS em rem
Manter valores de 1px em px
Copiar CSS convertido
Tamanho fluido com clamp()
Menor tamanho (px)
Maior tamanho (px)
Da largura (px)
Até a largura (px)
Informe tamanhos acima de zero e uma largura final maior que a largura inicial.
Copiar clamp()
Redimensione a janela para ver esta linha crescer.
em se acumula, rem não
Cada nível abaixo define font-size: 1.25 na sua unidade, aninhado em três níveis.
Nível {n}
Tabela completa de px para rem
Raiz {n}px. Clique em uma linha para copiar o valor em rem.
As classes Tailwind só aparecem com raiz de 16px, o tamanho sobre o qual a escala delas é construída.
{v} copiado.
px para rem com raiz de {n}px, de 1 a 128 pixels, com classes Tailwind