O que é o Conversor de Unidades CSS?

O Conversor de Unidades CSS ajuda você a converter instantaneamente entre as unidades de comprimento CSS mais comuns: px, rem e em. Seja você construindo um site responsivo ou migrando de unidades baseadas em pixels para unidades relativas, esta ferramenta torna a matemática sem esforço.

Por que Converter Unidades CSS?

O desenvolvimento web moderno favorece unidades relativas como rem e em em vez de pixels fixos. Unidades relativas se adaptam às preferências do usuário e tamanhos de tela, melhorando acessibilidade e design responsivo. Converter entre unidades garante que seus designs pareçam consistentes enquanto permanecem flexíveis.

Melhor Prática: Usar unidades relativas (rem/em) em vez de pixels fixos cria sites mais acessíveis que respeitam as preferências de tamanho de fonte do usuário e escalam melhor em diferentes dispositivos.

Entendendo as Unidades

px (Pixels)

Uma unidade absoluta representando um pixel do dispositivo. Fornece dimensionamento preciso e fixo para elementos como bordas e sombras.

rem (Root EM)

Relativo ao tamanho de fonte do elemento raiz (geralmente a tag <html>). Ideal para dimensionamento consistente em toda a sua página.

em (EM)

Relativo ao tamanho de fonte do elemento pai. Útil para dimensionamento em nível de componente, mas cuidado — valores em se compõem quando elementos estão aninhados.

Table of Contents

1. O que é o Conversor de Unidades CSS?
- 1.1. Por que Converter Unidades CSS?
- 1.2. Entendendo as Unidades
2. Como Usar o Conversor de Unidades CSS
3. Recursos
4. Perguntas Frequentes

Como Usar o Conversor de Unidades CSS

Conversão Rápida (Página Principal)

Defina seu tamanho de fonte base

O padrão é 16px (padrão padrão do navegador). Altere para corresponder ao font-size raiz do seu projeto.

Escolha a unidade de entrada

Clique em px, rem ou em nas abas de unidade.

Digite um valor

Digite qualquer número e veja todas as conversões atualizarem instantaneamente.

Copie um resultado

Clique no botão copiar ao lado de qualquer resultado para copiar o valor com sua unidade (por exemplo, "1.5rem").

Conversão Focada (Sub-Aplicativos)

Escolha um par de conversão

Selecione PX → REM, REM → PX ou PX → EM nas abas de sub-aplicativo.

Digite um valor em qualquer campo

Ambos os campos são entradas, então você pode digitar no campo "de" ou "para".

Inverta a direção

Clique no botão inverter para reverter a conversão (navega para o sub-aplicativo oposto).

Personalize as Configurações

Tamanho de Fonte Base

Afeta cálculos de rem. Defina para o valor html { font-size: ... } do seu projeto.

Tamanho de Fonte do Pai

Mostrado para conversões em. Defina para o font-size do elemento pai no seu contexto CSS.

Casas Decimais

Controle a precisão de saída de 1 a 6 casas decimais.

Salvamento Automático: Todas as configurações são salvas automaticamente e compartilhadas entre a página principal e os sub-aplicativos.

Recursos

Conversão Principal

Resultados em tempo real — Os valores são atualizados instantaneamente conforme você digita, sem necessidade de clicar em um botão.
Três unidades CSS — Converta entre px, rem e em em qualquer direção.
Entrada bidirecional — Em sub-aplicativos, digite em qualquer campo e o outro é atualizado automaticamente.
Tamanho base personalizável — Defina seu tamanho de fonte raiz ou pai para conversões precisas específicas do projeto.

Produtividade

Copiar com um clique

Copie qualquer resultado com seu sufixo de unidade (por exemplo, "1.5rem") pronto para colar no seu CSS.

Exemplos rápidos

Clique em valores comuns como 12px, 16px ou 1.5rem para ver resultados instantâneos.

Tabela de referência

Tabela expansível mostrando conversões para 18 valores de pixel comuns (8px–96px).

Inverter conversão

Inverta rapidamente a direção entre sub-aplicativos mantendo seu valor atual.

Configurações e Persistência

Precisão ajustável — Escolha de 1 a 6 casas decimais para valores de saída.
Preferências salvas — Tamanho de fonte base e configurações decimais persistem entre sessões via localStorage.
Configurações compartilhadas — As configurações são sincronizadas entre o conversor principal e todos os sub-aplicativos.

Privacidade

100% Privado: Todos os cálculos acontecem localmente no seu navegador. Nenhum valor é enviado para nenhum servidor e nenhum dado é coletado.

Perguntas Frequentes

Qual é o tamanho de fonte base padrão?

A maioria dos navegadores usa 16px como o font-size padrão para o elemento raiz <html>. Esta ferramenta usa 16px como padrão, mas você pode alterá-lo para corresponder às configurações do seu projeto.

Qual é a diferença entre rem e em?

rem é sempre relativo ao tamanho de fonte do elemento raiz, tornando-o consistente em toda a sua página. em é relativo ao tamanho de fonte do elemento pai, o que significa que valores em se compõem quando elementos estão aninhados (por exemplo, 1.2em dentro de 1.2em é igual a 1.44× o tamanho raiz).

rem

Relativo à Raiz

Sempre relativo a <html>
Consistente em toda a página
Sem composição
Melhor para dimensionamento global

Relativo ao Pai

Relativo ao elemento pai
Dependente do contexto
Valores se compõem quando aninhados
Melhor para dimensionamento em nível de componente

Quando devo usar rem em vez de px?

Use rem para tipografia, espaçamento e dimensões de layout quando você quer que seu design escale com as preferências do usuário. Usuários que aumentam o tamanho de fonte padrão do navegador se beneficiarão de designs baseados em rem. Mantenha px para elementos que devem permanecer fixos, como bordas e box-shadows.

Caso de Uso	Unidade Recomendada	Motivo
Tipografia	rem	Escala com preferências do usuário
Espaçamento/Margens	rem	Mantém layout proporcional
Bordas	px	Deve permanecer fixo
Sombras de Caixa	px	Controle visual preciso necessário
Dimensionamento de Componente	em	Relativo ao contexto do componente

Por que o conversor PX para EM mostra "Tamanho de Fonte do Pai" em vez de "Tamanho de Fonte Base"?

Porque em é relativo ao tamanho de fonte do elemento pai, não da raiz. O rótulo muda para "Tamanho de Fonte do Pai" para lembrá-lo de que o tamanho de referência depende do contexto do elemento na árvore DOM.

Importante: Ao usar unidades em, sempre considere o nível de aninhamento de seus elementos. Cada nível aninhado multiplica o valor em pelo font-size do seu pai.

Minhas configurações são salvas?

Sim. Seu tamanho de fonte base e precisão decimal são salvos no localStorage do seu navegador e compartilhados entre o conversor principal e todos os sub-aplicativos. Eles persistem mesmo após fechar o navegador.

Meus dados são enviados para algum servidor?

Não. Todas as conversões são calculadas localmente no seu navegador. Nenhum dado é transmitido ou armazenado em nenhum servidor.

Processamento 100% no cliente
Sem comunicação com servidor
Sem coleta ou rastreamento de dados
Configurações armazenadas apenas no seu navegador