O que é Conversor de Unidades CSS?
O CSS suporta várias unidades diferentes para dimensionamento — absolutas como px e pt, e relativas como rem, em, vw, vh e %. Unidades relativas são essenciais para um design responsivo e acessível (rem em particular respeita a preferência de tamanho de fonte do navegador do usuário), mas converter entre elas mentalmente é genuinamente difícil, já que o resultado depende do contexto: o tamanho de fonte raiz, o tamanho de fonte do elemento atual, ou as dimensões do viewport.
Este conversor faz essa conta por você: defina seu tamanho de fonte base, as dimensões do viewport e o valor que você está convertendo, e veja o valor equivalente em cada outra unidade instantaneamente — útil para traduzir as medidas em pixels de um mockup de design para valores responsivos em rem/vw, ou para verificar o que uma regra CSS existente realmente renderiza na tela.
Quando Usar Esta Calculadora
- Quando precisa de avaliar o custo antes de iniciar um projeto
- Quando quer comparar os resultados com outras ferramentas semelhantes
- Quando quer aprender a usar a ferramenta em diferentes cenários
- Quando precisa de partilhar os resultados com a equipa ou com clientes
- Quando quer verificar a precisão dos cálculos da ferramenta
- Quando procura uma solução rápida e simples para um problema específico
Passos:
- Digite o valor que você quer converter e selecione sua unidade de origem.
- Defina seu tamanho de fonte base (padrão do navegador de 16px).
- Para conversões vw/vh, digite a largura e altura do viewport de destino.
- Leia o valor equivalente em cada outra unidade instantaneamente.
Fórmula
1rem = 1em = tamanho de fonte base (padrão 16px)
1pt = 96/72 px ≈ 1,333px
1vw = largura do viewport / 100
1vh = altura do viewport / 100
1% = valor de referência / 100
Casos de uso
- Converter a especificação em pixels de um design do Figma/Sketch para valores rem em um CSS acessível
- Verificar o que um tamanho de fonte responsivo baseado em vw realmente renderiza em uma largura de tela específica
- Traduzir CSS legado baseado em pt de impressão ou e-mail para px ou rem padrão da web
- Auditar se a escala de espaçamento de um design system se alinha corretamente entre unidades
- Verificar rapidamente um valor CSS durante uma revisão de código sem abrir as ferramentas de desenvolvedor
Benefícios Principais
- Converte entre todas as 7 unidades CSS comuns em um só lugar
- Usa seu tamanho de fonte base e viewport reais, não uma suposição fixa
- Resultados instantâneos enquanto você digita — sem precisar abrir as ferramentas de desenvolvedor
- Gratuito, sem cadastro, roda inteiramente no seu navegador
Dicas Profissionais
- Prefira rem em vez de em para tamanhos de fonte para evitar acumulação inesperada em componentes aninhados
- Use dvh/svh em vez de vh para layouts de tela cheia em dispositivos móveis se seus navegadores de destino suportarem
- Mantenha um tamanho de fonte base consistente em todo o seu design system para que as conversões de rem permaneçam previsíveis
- Ao traduzir um design pixel-perfeito, converta o espaçamento para rem mas mantenha larguras de borda e outros detalhes finos em px
Erros Comuns a Evitar
- Assumir que 1rem sempre equivale a 16px, sem verificar se o tamanho de fonte raiz foi alterado
- Usar vh para layouts de tela cheia em dispositivos móveis sem considerar o comportamento da barra de endereço do navegador
- Aninhar tamanhos de fonte baseados em em e se surpreender quando eles se acumulam inesperadamente
- Misturar px e rem de forma inconsistente dentro do mesmo componente, quebrando a escala de acessibilidade
Termos Chave Explicados
- Tamanho de fonte raiz: O font-size definido no elemento html, ao qual todas as unidades rem são relativas
- Viewport: A área visível de uma página web na janela do navegador
- Unidade absoluta: Uma unidade como px ou pt com um tamanho fixo no mundo real, não relativa a nenhum contexto
- Unidade relativa: Uma unidade como rem, em, vw ou % cujo tamanho depende de outro valor
Conceitos relacionados
- Conversor de cor: Converta entre formatos de cor HEX, RGB e HSL
- Conversor de comprimento: Converta entre polegadas, centímetros, pixels e mais
- Conversor de unidades: Converta entre diversas unidades de medida
- Calculadora de proporção de aspecto: Calcule e converta proporções de aspecto
- Conversor de dados: Converta entre bytes, KB, MB, GB e TB
Exemplo
Com um tamanho de fonte base de 16px, 1.5rem converte para 24px. Com uma largura de viewport de 1440px, 5vw converte para 72px.
Interpretação dos seus resultados
Esta ferramenta mostra resultados detalhados com base nas entradas que você forneceu. Revise cada seção cuidadosamente para entender como interpretar os números e tomar decisões com base neles.
Se você tiver perguntas sobre como a ferramenta funciona ou como interpretar resultados específicos, consulte a seção de Perguntas Frequentes abaixo ou entre em contato com o suporte.