Conversor de PX para REM
Converta valores de pixel para unidades rem facilmente.
Na construção de interfaces digitais modernas, especialmente responsivas e acessíveis, é fundamental entender como diferentes unidades de medida impactam o comportamento do layout. O pixel (px) ainda é amplamente utilizado por designers em ferramentas de prototipação, onde a precisão visual é prioritária. Contudo, quando a interface vai para o código, o uso de unidades absolutas como pixel pode gerar problemas em ambientes com zoom de acessibilidade, telas de alta densidade ou preferências do usuário alteradas. É aí que entra o rem — uma unidade relativa ao tamanho da fonte do elemento raiz (<html>), que permite construir interfaces mais flexíveis, escaláveis e acessíveis.
🧮 Como funciona o conversor de PX para REM? A lógica da conversão baseia-se em uma equação simples, mas altamente dependente do contexto do tamanho de fonte base do documento HTML. A fórmula geral é:
valor em rem = valor em px / tamanho da fonte base
Por padrão, a maioria dos navegadores define a fonte base do elemento <html> como 16px. Assim, um valor de 32px seria convertido para 2rem. No entanto, esse valor pode ser modificado via CSS, o que altera todo o sistema de escala. A ferramenta considera o valor padrão (16px), mas permite ao usuário definir outro valor base, o que torna o conversor mais flexível e aderente a realidades específicas de projetos.
🌍 Padrões, evolução e contexto histórico O uso de unidades relativas como rem surgiu da necessidade de tornar interfaces mais adaptáveis e acessíveis. No início do CSS, a unidade em já oferecia proporcionalidade, mas como ela se baseia no tamanho do elemento pai, causava problemas de composição com herança. O rem (root em) foi introduzido para resolver isso, permitindo que o valor sempre fosse relativo à raiz do documento. Hoje, essa unidade é recomendada pelas diretrizes do W3C para layouts responsivos e acessíveis. Em paralelo, o pixel, que antes era baseado em valores físicos da tela (como 1/96 de polegada), se tornou uma unidade lógica, ou seja, o "pixel CSS", padronizado pelos navegadores, o que contribui para consistência visual entre dispositivos.
🧠 Curiosidades técnicas sobre pixel e rem
- O termo "pixel" vem de picture element — o menor componente de uma imagem digital.
- 1rem = 16px apenas se o <html> estiver com font-size: 16px. Alterar isso muda completamente as proporções.
- O uso de rem permite aumentar toda a interface apenas ajustando um único valor: o font-size do <html>.
- Em navegadores modernos, o usuário pode aumentar o tamanho padrão da fonte — o que impacta diretamente valores em rem, mas não afeta pixels.
📊 Tabela de Conversão: PX para REM (base 16px)
| Pixel | REM |
|---|---|
| 1px | 0.06rem |
| 2px | 0.13rem |
| 3px | 0.19rem |
| 4px | 0.3rem |
| 5px | 0.3rem |
| 6px | 0.4rem |
| 8px | 0.5rem |
| 10px | 0.6rem |
| 12px | 0.8rem |
| 14px | 0.9rem |
| 15px | 0.9rem |
| 16px | 1rem |
| 18px | 1.1rem |
| 20px | 1.3rem |
| 24px | 1.5rem |
| 25px | 1.6rem |
| 28px | 1.8rem |
| 32px | 2rem |
| 36px | 2rem |
| 40px | 3rem |
| 44px | 3rem |
| 48px | 3rem |
| 50px | 3rem |
| 56px | 4rem |
| 64px | 4rem |
| 72px | 5rem |
| 75px | 5rem |
| 80px | 5rem |
| 90px | 6rem |
| 100px | 6rem |