Conversor de Unidades CSS Converta entre px, em, rem, %, vw, vh, vmin e vmax com viewport e tamanho de fonte configuráveis.
Conversor de Unidades CSS
Converta entre px, em, rem, %, vw, vh, vmin e vmax com viewport e tamanho de fonte configuráveis.
Configure o contexto
Defina as dimensões da janela de visualização, o tamanho da fonte base e o tamanho do elemento pai.
Insira um valor
Digite o valor CSS para converter.
Selecione unidades
Escolha as unidades CSS de origem e destino.
What Is Conversor de Unidades CSS?
Um conversor de unidades CSS traduz entre as várias unidades de comprimento disponíveis em CSS, considerando unidades dependentes do contexto. Unidades fixas (px) sempre representam o mesmo tamanho visual. Unidades relativas dependem do contexto: em e rem relacionam-se com tamanhos de fonte, % relaciona-se com o elemento pai e unidades de viewport (vw, vh, vmin, vmax) relacionam-se com as dimensões da janela do navegador. Este conversor permite configurar todas as variáveis de contexto (tamanho da viewport, tamanho da fonte base, tamanho do pai) para conversões precisas entre quaisquer unidades CSS, tornando cálculos de design responsivo rápidos e precisos.
Why Use Conversor de Unidades CSS?
-
Dimensões da janela de visualização configuráveis para cálculos precisos de vw/vh.
-
Tamanho da fonte base ajustável para conversões em/em.
-
Tamanho do elemento pai para cálculos percentuais.
-
As oito unidades essenciais de comprimento CSS.
-
Perfeito para fluxo de trabalho de design responsivo.
Common Use Cases
Design Responsivo
Calcule valores vw para tipografia e layouts fluidos.
Design-to-Code
Converta especificações de design baseadas em pixels para unidades CSS responsivas.
Acessibilidade
Converta tamanhos fixos em pixels para unidades rem relativas.
Depuração de Layout
Entenda como as diferentes unidades CSS se traduzem em tamanhos reais de pixel.
Technical Guide
As unidades de comprimento em CSS se encaixam em duas categorias:
Absoluta:
• px: pixel CSS (1/96 de polegada em CSS, mas 1 pixel do dispositivo em displays padrão)
Relativa:
• em: relativo ao tamanho da fonte do elemento. 2em = 2× o tamanho da fonte atual
• rem: relativo ao tamanho da fonte raiz (elemento html). Mais previsível que em
• %: relativo ao valor da propriedade correspondente do elemento pai
• vw: 1% da largura da viewport. 100vw = largura total da viewport
• vh: 1% da altura da viewport. 100vh = altura total da viewport
• vmin: 1% da menor dimensão da viewport
• vmax: 1% da maior dimensão da viewport
Padrões responsivos comuns:
• Tipografia fluida: font-size: clamp(1rem, 2vw + 0.5rem, 2rem)
• Seções de altura total: min-height: 100vh
• Espaçamento responsivo: padding: 5vw
Tips & Best Practices
-
1Use rem para tamanhos de fonte (acessibilidade). Use px para bordas e sombras (precisão).
-
2vmin é ótimo para contêineres quadrados responsivos.
-
3clamp() com unidades vw permite tipografia fluida sem consultas de mídia.
-
4100vh em dispositivos móveis pode incluir a barra de endereços - use 100dvh (altura dinâmica da janela de visualização) instead.
-
5Quando tiver dúvidas, comece com rem e px. Adicione vw/vh apenas quando precisar de dimensionamento relativo à janela de visualização.
Related Tools
Conversor de Comprimento
Converta entre milímetros, centímetros, metros, quilômetros, polegadas, pés, jardas, milhas e milhas náuticas instantaneamente.
⚖️ Unit Converters
Conversor de Luminância
Converta entre candelas/m², nits, lamberts e pés-lamberts.
⚖️ Unit Converters
Conversor de Unidades Tipográficas
Converta entre px, pt, em, rem, cm, mm, polegadas e picas com tamanho de fonte base configurável.
⚖️ Unit Converters
Conversor de Indutância
Converta entre henries, milihenries, microhenries e nanohenries.
⚖️ Unit ConvertersFrequently Asked Questions
Q Como eu converto px para vw?
Q Qual é a diferença entre vw e %?
Q Quando eu devo usar rem em vez de em?
Q O que é vmin?
Q Por que páginas com 100vh têm barras de rolagem em dispositivos móveis?
About This Tool
Conversor de Unidades CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.