Conversor de unidades CSS
Converta entre px, rem, em, vw, vh e outras unidades CSS
Configurações e entrada
Predefinições rápidas e exemplos
Roda no seu navegador. Os dados informados ficam neste dispositivo.
Resultados
Informe os valores para ver os resultados.
Referência e detalhes do cálculo
Sobre o Conversor de unidades CSS gratuito
O Conversor de unidades CSS é uma ferramenta gratuita e completa para desenvolvedores web e designers converterem na hora entre as principais unidades de comprimento do CSS. Seja para converter pixels em rem, em em porcentagem, ou unidades de viewport em medidas absolutas, a ferramenta faz conversões precisas e em tempo real entre 10 unidades CSS ao mesmo tempo.
Entender e usar corretamente as unidades CSS é fundamental para criar sites responsivos e acessíveis. Unidades relativas, como rem e em, acompanham as configurações de tamanho da fonte e fazem seu layout se adaptar às preferências do usuário e às necessidades de acessibilidade. As unidades de viewport (vw, vh) criam designs fluidos que respondem ao tamanho da tela. As unidades absolutas (px, pt, cm, mm, in) oferecem medidas fixas para controle preciso quando necessário.
Esta ferramenta de conversão de unidades CSS vai além das calculadoras simples: você pode personalizar o tamanho base da fonte para os cálculos de rem/em/% e definir as dimensões do viewport para as conversões de vw/vh. Os resultados das 10 unidades aparecem em uma grade clara, com cópia em um clique e troca instantânea de unidade, o jeito mais rápido de achar o valor CSS certo para qualquer contexto de design.
Principais recursos
- Converta entre 10 unidades CSS: px, rem, em, %, vw, vh, pt, cm, mm e in
- Todas as conversões exibidas ao mesmo tempo em uma grade responsiva
- Tamanho base da fonte personalizável para cálculos precisos de rem, em e porcentagem
- Largura e altura do viewport configuráveis para conversões precisas de vw e vh
- Cópia para a área de transferência em um clique, com o sufixo da unidade incluído
- Troca instantânea de unidade para definir qualquer valor convertido como nova origem
- Predefinições rápidas para valores comuns, como 1rem, 100vw, 50% e tamanhos de fonte padrão
- Descrições das unidades mostrando o que cada unidade CSS representa
- Formatação inteligente dos números, com precisão decimal adequada
- Suporte a modo escuro para uso confortável em qualquer ambiente de programação
Como usar o Conversor de unidades CSS
- Digite um valor: insira o valor numérico que você quer converter no campo de entrada, na parte superior da ferramenta.
- Escolha a unidade de origem: selecione no menu a unidade CSS do valor digitado (px, rem, em, %, vw, vh, pt, cm, mm ou in).
- Ajuste as configurações, se necessário: personalize o tamanho base da fonte (padrão 16px) e as dimensões do viewport (padrão 1920x1080) de acordo com a configuração do seu projeto.
- Veja todas as conversões: as 10 conversões de unidade aparecem na hora na grade abaixo. A unidade de origem fica destacada em azul para facilitar a identificação.
- Copie ou troque: clique no ícone de copiar para copiar qualquer valor convertido com o sufixo da unidade, ou no ícone de trocar para definir esse valor como nova origem em outras conversões.
Casos de uso
- Design responsivo: converta designs em pixels do Figma ou do Sketch para as unidades rem e em, para layouts CSS escaláveis e acessíveis.
- Conformidade com acessibilidade: troque valores fixos em px por unidades relativas rem/em, para que seus layouts respeitem as preferências de tamanho de fonte do usuário e as diretrizes WCAG.
- Layouts baseados em viewport: calcule valores exatos de vw e vh para seções em tela cheia, tipografia responsiva e espaçamento fluido.
- Criação de folhas de estilo para impressão: converta unidades de tela em valores pt, cm, mm e in adequados à impressão, para folhas de estilo CSS @media print.
- Desenvolvimento de design systems: estabeleça escalas consistentes de espaçamento e tipografia convertendo entre sistemas de unidades nos seus design tokens.
- Migração de frameworks CSS: converta entre sistemas de unidades ao migrar de um framework ou metodologia CSS para outro.
- Desenvolvimento multiplataforma: garanta dimensões consistentes na web, na web mobile e em apps híbridos, convertendo entre unidades específicas de cada plataforma.
Perguntas frequentes
Esta ferramenta é gratuita?
Sim, o Conversor de unidades CSS é totalmente gratuito. Não há limite de uso, não é preciso criar conta e não existem recursos premium. Converta quantos valores precisar.
Meus dados estão seguros?
Com certeza. Todas as conversões são calculadas inteiramente no seu navegador, com JavaScript. Nenhum dado é enviado a um servidor. A ferramenta funciona totalmente offline depois que a página é carregada.
Por que preciso definir um tamanho base da fonte?
Unidades relativas, como rem, em e %, dependem de um tamanho de fonte de referência. A maioria dos navegadores usa 16px por padrão, mas seu projeto pode adotar outra base. Definir o tamanho base correto garante conversões precisas para a configuração específica do seu projeto.
Qual é a diferença entre rem e em?
Tanto rem quanto em são relativos ao tamanho da fonte, mas o rem é sempre relativo ao tamanho da fonte do elemento raiz (html), enquanto o em é relativo ao tamanho da fonte do elemento pai. Neste conversor, ambos usam o tamanho base configurado, já que o contexto específico do DOM não está disponível.
Como as unidades de viewport são calculadas?
1vw equivale a 1% da largura do viewport e 1vh equivale a 1% da altura do viewport. O conversor usa as dimensões de viewport que você definir (padrão 1920x1080) para calcular esses valores. Ajuste as configurações para o tamanho de tela desejado e obtenha resultados precisos.
Como funciona a conversão de px para pt?
A conversão usa a proporção padrão de 96 pixels CSS por polegada e 72 pontos por polegada. Assim, 1pt equivale a aproximadamente 1,333px (96/72). Essa proporção é a mesma em todos os navegadores e sistemas operacionais modernos.
Dicas e boas práticas
- Use rem na tipografia: defina o tamanho base da fonte no elemento html e use unidades rem em todos os tamanhos de texto, para uma tipografia consistente e acessível em todo o site.
- Prefira unidades relativas: use rem, em e % para espaçamento e layout, criando designs que se adaptam às preferências do usuário e a diferentes tamanhos de tela.
- Alinhe com as configurações do projeto: defina sempre no conversor o tamanho base da fonte e as dimensões do viewport conforme a configuração real do seu projeto, para obter resultados precisos.
- Use unidades de viewport com moderação: embora vw e vh sejam poderosas em layouts fluidos, podem causar problemas em navegadores mobile, onde o tamanho do viewport muda com a rolagem. Considere usar clamp() do CSS para valores responsivos mais robustos.
- Teste em vários dispositivos: depois de converter as unidades, teste seu CSS em diversos dispositivos e tamanhos de tela para verificar se os valores geram o resultado visual esperado.
- Guarde as conversões frequentes: use as predefinições rápidas para valores muito usados, como 1rem, tamanhos de fonte padrão e cálculos comuns de viewport, e agilize seu trabalho.