Um conversor rápido e local de px para rem
Este conversor bidirecional de px para rem facilita a conversão de medidas estáticas em pixels para unidades relativas, acessíveis e escaláveis. Seja para transformar um mockup de design em código ou refatorar uma folha de estilos antiga, você pode calcular instantaneamente os valores exatos de CSS que precisa.
Cada cálculo acontece instantaneamente enquanto você digita. Como a ferramenta roda de forma totalmente local no seu navegador, não há tempo de carregamento ou atraso de rede. Você pode converter pixels para rem de forma contínua, ou inverter a direção e converter rem para px, tudo sem tirar as mãos do teclado.
Por que converter pixels para rem?
Por anos, desenvolvedores web usaram pixels (px) para tudo, desde o tamanho das fontes até o padding. No entanto, pixels são unidades absolutas. Se um usuário com deficiência visual alterar as configurações do navegador para exibir o texto em um tamanho padrão maior (por exemplo, 24px em vez dos 16px padrão), qualquer texto definido em pixels vai ignorar essa preferência e continuará pequeno.
Ao usar unidades rem (root em), todo o seu layout respeita as configurações do usuário. Se o usuário aumentar o tamanho de fonte padrão, sua tipografia, margens e paddings baseados em rem aumentarão proporcionalmente. Isso torna seu site muito mais acessível e responsivo. Usar uma calculadora de rem CSS elimina as suposições desse processo, permitindo que você escreva um código acessível e, ao mesmo tempo, corresponda exatamente às dimensões em pixels fornecidas pela sua equipe de design.
Como a calculadora de rem CSS funciona
A matemática por trás da conversão é simples, mas fazer isso de cabeça repetidas vezes pode atrasar seu fluxo de trabalho. A fórmula para converter pixels para rem é:
Pixels Desejados ÷ Tamanho Base da Fonte = Valor em Rem
Por padrão, quase todos os navegadores web usam um tamanho base de fonte de 16px. Se você quer que um título tenha 32px em uma tela padrão, basta dividir 32 por 16, o que resulta em 2rem.
Se você está trabalhando com um código existente e precisa entender qual será o tamanho de uma unidade relativa, pode usar a ferramenta para converter rem para px. A fórmula simplesmente se inverte:
Valor em Rem × Tamanho Base da Fonte = Valor em Pixels
Esta calculadora funciona nos dois sentidos simultaneamente. Basta digitar em qualquer um dos campos e o outro é atualizado instantaneamente. Ela também arredonda decimais complexos para quatro casas, mantendo seu CSS limpo e legível sem sacrificar a precisão.
Trabalhando com tamanhos de fonte base personalizados
Embora 16px seja o padrão da web, alguns projetos modificam o tamanho da fonte raiz. Uma técnica muito comum em códigos mais antigos é o "truque dos 62,5%". Os desenvolvedores definiam html { font-size: 62.5%; } no CSS. Como 62,5% dos 16px padrão equivalem a exatamente 10px, isso altera o tamanho base da fonte para 10.
Com uma base 10, a matemática fica muito fácil: 24px é 2.4rem, 18px é 1.8rem e assim por diante. Se você estiver trabalhando em um projeto que usa essa técnica, ou qualquer outro tamanho raiz personalizado, basta alterar o campo Tamanho base da fonte na calculadora. A ferramenta aceita qualquer base entre 1 e 100, recalcula instantaneamente seus valores atuais e atualiza toda a tabela de referência.
Além da tipografia: espaçamento e layouts
Embora as unidades rem sejam mais conhecidas pelo font-size, elas são igualmente importantes para propriedades de layout. As melhores práticas modernas de CSS recomendam o uso de unidades relativas para:
- Margem e Preenchimento: Garantir que o espaço em branco entre os elementos aumente proporcionalmente ao texto, evitando layouts espremidos.
- Largura e Altura: Criar botões ou campos de input que crescem naturalmente junto com o texto dentro deles.
- Media Queries: Definir breakpoints em
remouemgarante que os layouts se adaptem com base no tamanho real do texto, e não apenas na largura física da tela.
Ao criar componentes de UI complexos, você pode combinar esta ferramenta com o Gerador de Box Shadow para criar design systems totalmente escaláveis e acessíveis. Quando sua folha de estilos estiver pronta, você pode passá-la por um Minificador de CSS para manter o tamanho dos arquivos reduzido para produção.
Usando a tabela de referência rápida
Em sistemas de design padrão, é comum reutilizar as mesmas escalas de espaçamento e tipografia. Abaixo da calculadora principal, você encontra uma tabela de referência com valores comuns em pixels (de 10px a 64px) convertidos automaticamente para as unidades rem e em.
Essa tabela é atualizada em tempo real se você alterar o tamanho da fonte base. Ela funciona como um guia rápido perfeito para incrementos padrão de espaçamento (como 16, 24, 32 e 48 pixels), evitando que você precise digitar cada valor na calculadora. Se precisar converter outras medidas físicas, confira também o nosso Conversor de Unidades geral.