Conversor de Unidades CSS

O que é Conversor de Unidades CSS?

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:

1. Digite o valor que você quer converter e selecione sua unidade de origem.
2. Defina seu tamanho de fonte base (padrão do navegador de 16px).
3. Para conversões vw/vh, digite a largura e altura do viewport de destino.
4. Leia o valor equivalente em cada outra unidade instantaneamente.

Fórmula

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

• [object Object]
• [object Object]
• [object Object]
• [object Object]
• [object Object]

Exemplo

Interpretação dos seus resultados