Conversor de PX para REM / EM

• Conversões de PX para REM / EM instantâneas: Converta valores em pixels para rem e em na hora no seu navegador, sem espera. Nosso conversor de px para rem e em dá conta das quatro direções - px→rem, rem→px, px→em, em→px - em milissegundos, com uma tabela de referência completa.
• Conversor de PX para REM online seguro: Todas as conversões de px para rem e em acontecem localmente no seu navegador: seus valores nunca saem do seu dispositivo. Use nosso conversor de px para rem e em online com privacidade total e zero coleta de dados.
• Conversor de PX para REM online sem instalação: Use nosso conversor de px para rem e em direto em qualquer navegador, sem downloads, plugins ou apps para instalar. Converta valores em pixels de qualquer dispositivo, em qualquer lugar, na hora.
• Tamanho de fonte raiz e pai configurável: Nosso conversor de px para rem e em permite definir qualquer tamanho de fonte raiz para conversões em rem e qualquer tamanho de fonte pai para conversões em em. Escolha entre presets comuns (14px, 16px, 18px, 20px) ou informe um valor personalizado.

• Design web responsivo: Converta valores fixos em pixels para unidades rem e crie layouts escaláveis e acessíveis que respeitam as preferências de tamanho de fonte do usuário. Use nosso conversor de px para rem para migrar designs baseados em pixels para CSS fluido e responsivo.
• Escala tipográfica em CSS: Defina tamanhos de fonte em rem para garantir que o texto escale proporcionalmente ao tamanho de fonte raiz. Nosso conversor de px para rem e em ajuda a traduzir especificações de design em pixels para os valores rem corretos, garantindo tipografia consistente.
• Espaçamento no nível do componente com EM: Use unidades em em paddings e margens que escalam em relação ao tamanho de fonte do próprio componente. Nosso conversor de px para em calcula o valor em correto a partir de qualquer tamanho de fonte pai para espaçamentos específicos do componente.
• Acessibilidade e conformidade com WCAG: As diretrizes WCAG recomendam unidades relativas como rem para tamanhos de fonte, apoiando o zoom do navegador e as preferências do usuário. Nosso conversor de px para rem ajuda desenvolvedores a criar interfaces acessíveis que atendem aos requisitos da WCAG 1.4.4.
• Desenvolvimento de design systems: Design systems usam escalas de espaçamento em rem (por exemplo 0.25rem, 0.5rem, 1rem, 1.5rem). Use nosso conversor de px para rem e em para traduzir valores em pixels de designs no Figma ou Sketch para os tokens rem corretos do seu design system.
• Personalização de frameworks CSS: Tailwind CSS, Bootstrap e outros frameworks usam dimensionamentos em rem. Use nosso conversor de px para rem para calcular os valores rem corretos ao personalizar breakpoints, escalas de espaçamento e tipografia em frameworks CSS.

Em CSS, px (pixels) são unidades absolutas: 16px são sempre 16px, independentemente de qualquer outra configuração. rem (root em) é uma unidade relativa baseada no tamanho de fonte do elemento raiz (o elemento <html>). Se o tamanho de fonte raiz for 16px, então 1rem = 16px, 1.5rem = 24px e 0.5rem = 8px. em também é uma unidade relativa, mas é relativa ao tamanho de fonte do elemento pai, e não ao da raiz. Se um elemento pai tiver tamanho de fonte 20px, então 1em = 20px dentro desse elemento. Nosso conversor de px para rem e em dá conta das quatro direções de conversão - px→rem, rem→px, px→em, em→px - com tamanhos de fonte raiz e pai configuráveis.

1. 1. Configure os tamanhos de fonte: Defina o tamanho de fonte raiz para as conversões em rem (16px por padrão, o valor padrão do navegador) e o tamanho de fonte pai para as conversões em em. Escolha entre presets comuns ou informe um valor personalizado. Todo o processamento acontece localmente no seu navegador: seus dados nunca saem do seu dispositivo.
2. 2. Escolha a direção e informe o valor: Selecione px→rem, rem→px, px→em ou em→px no menu de direção. Use o botão de inverter para trocar a direção na hora. Informe seu valor e clique em Converter.
3. 3. Veja os resultados e a tabela de referência: O resultado aparece na hora com um botão de copiar. Uma tabela de referência mostra valores em pixels comuns (de 4px a 96px) convertidos tanto para rem quanto para em com os tamanhos de fonte configurados, para consulta rápida.

• PX para REM: rem = px ÷ tamanho da fonte raiz. Exemplo: 24px ÷ 16px = 1.5rem.
• REM para PX: px = rem × tamanho da fonte raiz. Exemplo: 1.5rem × 16px = 24px.
• PX para EM: em = px ÷ tamanho da fonte pai. Exemplo: 24px ÷ 20px = 1.2em.
• EM para PX: px = em × tamanho da fonte pai. Exemplo: 1.2em × 20px = 24px.

Use rem para dimensionamentos globais que devem escalar com a preferência de tamanho de fonte do navegador do usuário: tamanhos de fonte, escalas de espaçamento e dimensões de layout. O rem é previsível porque sempre referencia a raiz, evitando o efeito cumulativo de valores em aninhados. Use em para dimensionamentos limitados ao componente, quando você quer que os elementos escalem em relação ao tamanho de fonte do contêiner: paddings, margens e tamanhos de ícones dentro de um componente. O em é poderoso para componentes autocontidos, mas pode se acumular de forma inesperada em elementos muito aninhados. O tamanho de fonte raiz padrão do navegador é 16px, por isso 1rem = 16px na maioria dos navegadores, a menos que o usuário ou o desenvolvedor altere.