Conversor de unidades de janela de visualização

• Conversão instantânea entre todas as unidades de viewport: O conversor de unidades de viewport converte instantaneamente valores entre vw, vh, vmin, vmax, dvw, dvh, svw, svh, lvw, lvh e muito mais - além de px, rem, em, pt, porcentagens e unidades físicas. Cada pressionamento de tecla atualiza todos os resultados em tempo real, sem nenhum botão para pressionar.
• Predefinições de dispositivos reais e janela de visualização personalizada: escolha entre 11 predefinições de dispositivos - iPhone, iPad, Pixel, Galaxy e vários tamanhos de área de trabalho - ou insira dimensões de janela de visualização personalizadas. Veja exatamente como seus valores CSS se comportam em diferentes pontos de interrupção sem trocar de DevTools do navegador.
• Todas as unidades em uma visualização: veja todas as conversões de unidades de uma só vez em uma tabela de resultados rolável. Cada linha mostra o nome da unidade e o valor convertido com um botão de cópia de um clique. O resultado principal aparece com destaque no contexto atual das dimensões da janela de visualização.
• Predefinições rápidas de valores CSS: selecione rapidamente entre 17 valores CSS comuns (1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 96, 100) para ver instantaneamente qual é o equivalente em cada unidade de janela de visualização - perfeito para fluxos de trabalho de design responsivos.

• Desenvolvimento CSS responsivo: Os desenvolvedores front-end usam o Viewport Unit Converter para traduzir valores de pixels de maquete de design em unidades de viewport responsivas (vw, vh, vmin, vmax). Converta tamanhos de fonte, espaçamento e dimensões de elementos em diferentes tamanhos de viewport sem cálculo manual.
• Design responsivo que prioriza dispositivos móveis: os designers de dispositivos móveis usam o conversor de unidades de viewport para garantir que os valores CSS funcionem em todos os tamanhos de telefone. Teste como um tamanho de fonte 5vw é renderizado em um iPhone SE (375px) versus um Pixel 7 (412px) e ajuste de acordo para obter uma tipografia consistente.
• Planejamento de tablets e pontos de interrupção: Designers e desenvolvedores usam o Viewport Unit Converter para planejar pontos de interrupção responsivos. Entenda como as unidades de janela de visualização se comportam em tamanhos de iPad (744-834px) e tablets para garantir um dimensionamento suave entre layouts de dispositivos móveis e desktop.
• Transferência do design para o código: os designers usam o Viewport Unit Converter durante a transferência do design para o desenvolvimento. Converta os valores de pixel do Figma em unidades de janela de visualização equivalentes no tamanho da janela de visualização alvo, fornecendo aos desenvolvedores valores CSS exatos que correspondem à intenção do design.
• Layouts de tela grande e desktop: os desenvolvedores de desktop usam o Viewport Unit Converter para testar valores CSS em tamanhos comuns de desktop - 1024px, 1280px, 1366px, 1440px e 1920px. Certifique-se de que os layouts baseados em VW sejam dimensionados corretamente, desde laptops padrão até monitores ultralargos.
• Sistemas de tamanho e espaçamento de fonte: os mantenedores do sistema de design usam o Viewport Unit Converter para criar tipos responsivos e escalas de espaçamento. Converta entre rem (relativo à raiz), vw (relativo à janela de visualização) e px (absoluto) para criar tokens de design consistentes com escalabilidade previsível.

As unidades de janela de visualização CSS são unidades de comprimento relativo calculadas com base no tamanho da janela de visualização - a área visível de uma página da web na janela do navegador. Existem três categorias de unidades de viewport. As unidades clássicas ( vw , vh , vmin , vmax ) são baseadas no bloco inicial. As unidades mais recentes adicionadas em Valores CSS Nível 4 fornecem controle mais preciso: dvw/dvh (dinâmico - responde às alterações do cromo do navegador), svw/svh (pequeno - usa a menor janela de visualização possível) e lvw/lvh (grande - usa a maior janela de visualização possível). Nosso conversor de unidades de viewport permite converter entre todas essas unidades e outras unidades de comprimento CSS, ajudando você a criar designs responsivos com confiança.

1. Insira seu valor: digite um valor numérico e selecione a unidade de origem (por exemplo, 16 vw). Use as predefinições de valores CSS comuns para testar rapidamente valores de espaçamento padrão como 8, 16, 24, 32, 48 e 64.
2. Defina o tamanho da janela de visualização: escolha uma predefinição de dispositivo (iPhone, iPad, tamanhos de desktop) ou insira a largura e a altura da janela de visualização personalizadas. O tamanho da fonte raiz (para rem) e o tamanho da fonte pai (para em) também são configuráveis. Todas as conversões são atualizadas instantaneamente conforme você altera qualquer configuração.
3. Leia os resultados: A conversão primária (em pixels) é mostrada com destaque, enquanto a tabela de resultados completa exibe o valor equivalente em cada unidade suportada - unidades de janela de visualização, unidades relativas à fonte, unidades físicas, porcentagens e muito mais. Copie valores individuais ou todos os valores de uma vez com um clique.

• Unidades clássicas de viewport (vw, vh, vmin, vmax): 1vw = 1% da largura da viewport, 1vh = 1% da altura da viewport, 1vmin = 1% da dimensão menor (útil para garantir que os elementos se ajustem em ambas as orientações) e 1vmax = 1% da dimensão maior. Eles são baseados no bloco inicial e possuem excelente suporte ao navegador.
• Unidades de viewport dinâmicas (dvw, dvh, dvmin, dvmax): essas unidades respondem a alterações dinâmicas no tamanho da viewport causadas pelo aparecimento ou desaparecimento do cromo do navegador (barra de endereço, barras de ferramentas) conforme o usuário rola. Em navegadores móveis, 100dvh fornece a altura visível real, incluindo alterações dinâmicas, resolvendo o clássico problema "100vh inclui a barra de endereço".
• Unidades de viewport pequenas e grandes (svw, svh, lvw, lvh): unidades de viewport pequenas usam o menor tamanho de viewport possível (com o cromo do navegador totalmente visível). Unidades de janela de visualização grandes usam o maior tamanho de janela de visualização possível (com o cromo do navegador oculto). Usar 100svh garante que seu elemento caiba mesmo com a exibição da barra de endereço, enquanto 100lvh preenche a tela inteira quando o usuário rola.
• Unidades físicas e relativas à fonte: px (pixels CSS), pt (pontos), cm, mm, in (polegadas), pc (picas), q (quarto de milímetro), rem (raiz em), em (pai em), ch (largura do caractere de "0") e ex (altura x de "x"). O Viewport Unit Converter lida com tudo isso junto com as unidades da viewport para uma conversão completa do comprimento do CSS.

As unidades de viewport são poderosas, mas requerem uso cuidadoso:

• Tipografia: use clamp() com unidades vw para tamanhos de fonte responsivos que permaneçam dentro dos limites mínimo/máximo - por exemplo, font-size: clamp(16px, 2vw, 24px) . Use o conversor para encontrar o valor vw correto para o tamanho do pixel alvo.
• Elementos de altura total: em dispositivos móveis, altura: 100vh pode ser maior que a área visível devido ao cromo do navegador. Considere usar 100dvh (dinâmico) ou 100lvh (grande) para layouts de tela cheia.
• Evite o uso excessivo no corpo do texto: as unidades da janela de visualização no corpo do texto podem causar problemas de acessibilidade porque os usuários não podem redimensionar o texto que usa unidades vw em alguns navegadores. Use rem para corpo de texto e reserve vw para títulos e elementos grandes.
• Teste em vários pontos de interrupção: um valor que funciona em 1440px pode ser muito grande em 375px ou muito pequeno em 2560px. Use o conversor de unidades de viewport com diferentes predefinições de dispositivos para verificar seus valores em toda a gama de tamanhos de viewport.