Pixel ↔ REM
Converta entre pixels e REM para CSS
Como usar Pixel ↔ REM
Converta entre pixels e REM para CSS Ferramenta gratuita online, sem registo, sem anúncios intrusivos. Use agora.
Por que desenvolvedores web convertem entre pixels e REM?
A boa prática moderna de CSS favorece unidades relativas (REM, EM) em vez de pixels absolutos para tamanhos de fonte e espaçamento. Isso garante que usuários que configuram um tamanho de fonte maior nas preferências do navegador vejam o texto escalonado de forma adequada — um requisito fundamental de acessibilidade que afeta milhões de usuários com deficiência visual.
- Tamanho de fonte: Em vez de
font-size: 16px, usefont-size: 1rem. Se a fonte base do navegador do usuário for 20px, tudo escala proporcionalmente — garantindo boa experiência para usuários com baixa visão que aumentam o tamanho da fonte do sistema. - Espaçamento e preenchimento: Margens e padding em REM escalam com a preferência de fonte do usuário.
padding: 1.5remé mais acessível do quepadding: 24px— e respeita as configurações de acessibilidade do usuário. - Implementação de sistemas de design: Ferramentas de design (Figma, Sketch) exportam valores em pixels. Converta para REM antes de escrever CSS para que o sistema de design seja acessível por padrão.
- Media queries: Media queries baseadas em REM respeitam a preferência de tamanho de fonte do usuário.
@media (min-width: 48rem)dispara em 768px para uma base de 16px, mas em um valor de pixels maior para usuários com fontes maiores. - Bibliotecas de componentes: Construir componentes reutilizáveis em REM garante que se comportem de forma consistente em diferentes contextos de tamanho de fonte base — importante para quem cria design systems.
REM vs EM: REM (Root EM) é sempre relativo ao tamanho da fonte do elemento raiz (html) — consistente e previsível em todo o documento. EM é relativo ao tamanho de fonte do elemento atual — pode se acumular inesperadamente em elementos aninhados. REM é preferível para a maioria dos casos de uso.
Frequently Asked Questions
Qual é o tamanho de fonte padrão do navegador?
O padrão é 16px em todos os principais navegadores (Chrome, Firefox, Safari, Edge). Usuários podem alterar isso nas configurações do navegador — e este é o ponto central de usar REM. 1rem = 16px por padrão, mas pode ser 18px, 20px ou 12px dependendo das preferências do usuário. Respeitar essa configuração é questão de acessibilidade.
Por que alguns desenvolvedores usam html { font-size: 62.5% }?
Definir o tamanho de fonte raiz para 62,5% de 16px = 10px facilita o cálculo mental: 1,6rem = 16px, 2,4rem = 24px. É um truque comum, mas substitui o tamanho de fonte preferido do usuário, prejudicando parcialmente o propósito de acessibilidade do REM. Uma abordagem melhor é usar calc() do CSS ou simplesmente dividir por 16 nos valores.
Quando devo usar PX em vez de REM?
Use PX para bordas (bordas de 1px sempre devem ser 1px), box-shadows e elementos onde o tamanho exato em pixels importa independentemente das preferências de fonte — como uma linha separadora de 2px. Use REM para tamanhos de fonte, padding, margin e qualquer espaçamento que deva escalar com o texto para melhor acessibilidade.
Qual é a diferença entre REM, EM e PX?
PX é uma unidade absoluta — sempre o mesmo tamanho independentemente das configurações do sistema. EM é relativo ao tamanho de fonte do elemento pai — pode se acumular em elementos aninhados de forma imprevisível. REM é relativo ao tamanho de fonte raiz (html) — consistente em todo o documento. Para design acessível, prefira REM sobre PX para tamanhos de fonte e espaçamento.
Como converter um design inteiro de pixels para REM?
Divida cada valor em pixels pelo tamanho de fonte raiz (padrão: 16). Assim, 24px ÷ 16 = 1,5rem. Funções do Sass (px-to-rem()) ou plugins de PostCSS podem automatizar essa conversão em toda uma base de código. Também existem extensões do VS Code que fazem a conversão automaticamente ao digitar.
REM vs EM vs PX vs VW/VH vs porcentagens
PX é absoluto — preciso, mas não escalável. REM escala com o tamanho de fonte raiz — melhor para tipografia e espaçamento acessível. EM escala com o tamanho de fonte do pai — útil para espaçamento em nível de componente, mas pode se acumular. VW/VH são porcentagens do viewport — úteis para layouts fluidos e seções em tela cheia. Porcentagens são relativas ao elemento pai — essenciais para larguras responsivas. O CSS moderno usa uma combinação: REM para tipografia e espaçamento, VW/VH para layout e porcentagens para larguras.