Unidades da Janela de Visualização: vw, vh e dvh

As unidades da área de visualização são relativas ao tamanho da área de visualização do navegador (a área visível da janela do navegador). Elas permitem criar layouts e tipografias que escalam com o espaço disponível na tela.

1vw = 1% da largura da área de visualização. 100vw preenche toda a largura da área de visualização. É útil para elementos de largura total sem as complicações das porcentagens.

1vh = 1% da altura da área de visualização. 100vh preenche toda a altura da área de visualização. É uma opção clássica para seções de destaque e modais em tela cheia.

Em navegadores móveis, a altura da área de visualização muda à medida que a interface do navegador (a barra de endereço) aparece ou desaparece durante a rolagem. 100vh pode incluir ou excluir os elementos da interface do navegador de forma inconsistente, fazendo com que parte do conteúdo fique oculta.

dvh (altura dinâmica da área de visualização) é atualizado dinamicamente para refletir a altura realmente visível depois que a interface do navegador é ajustada. Ele resolve o problema do 100vh em dispositivos móveis.

O CSS também oferece svh (altura pequena da área de visualização — sempre exclui a interface do navegador) e lvh (altura grande da área de visualização — como se a interface estivesse oculta). Isso permite um controle preciso do comportamento da área de visualização em dispositivos móveis.

Usar vw para o tamanho da fonte cria uma tipografia que escala com a tela:

100vw inclui a largura da barra de rolagem em computadores. Isso causa uma rolagem horizontal se for usado sem cuidado. Prefira width: 100% em elementos de bloco, reservando vw para casos específicos.

1vmin = 1% da menor dimensão da área de visualização (largura ou altura). 1vmax = 1% da maior. São úteis para contêineres quadrados que se adaptam às mudanças de orientação.

Assim como ocorre com as variações de altura, o CSS oferece svw, lvw e dvw para a largura. As variações dinâmicas (dvw, dvh) são as mais úteis em dispositivos móveis.

Padrões comuns de unidades da área de visualização:

• min-height: 100dvh — seções em tela cheia seguras para dispositivos móveis
• height: 100svh — painéis de interface fixos
• font-size: clamp(1rem, 2.5vw, 2rem) — títulos fluidos
• width: min(800px, 90vw) — contêineres com largura segura

vw e vh correspondem a 1% da largura e da altura da área de visualização. Em dispositivos móveis, vh não é confiável devido à interface do navegador. Use dvh para layouts em tela cheia dinâmicos e precisos em dispositivos móveis. vmin e vmax respondem à menor e à maior dimensão da área de visualização.