Hoje iremos entender o que são essas siglas, Vw, Vh, Dvh e Dvw e como utiliza-las no CSS.

No CSS é possível definir tamanho de altura e largura de vários elementos, da mesma maneira tamanho de fontes. Essas siglas são nada mais nada menos que unidades para medir tamanhos referente a tela, seja ela de mobile ou desktop.

Viewport Width (VW)

O vw é uma unidade de largura de uma elemento, 1vw é equivalente a 1% da viewport. O Viewport é toda a área visível em uma página web, porem ela não conta com a área fora dela, como por exemplo a parte superior do navegador. O Viewport conta apenas com a área visível de conteúdo dentro do navegador.

O VW é a largura do conteúdo mostrado no navegador. Se a largura for 100px então 1vw será 1px pois equivale a 1% do viewport como dito anteriormente.

Viewport Height (VH)

Assim como o VW o Viewport Height é uma unidade que a altura da área visível no navegador. Ele também equivale 1% do valor, só que da altura, se a altura viewport for de 100px então 1vh será igual a 1px.

Dynamic Viewport Width (DVW) Dynamic Viewport Height (DVH)

O Dvw/Dvh segue a mesma premissa das outras unidades, 1dvw/1dvh representa 1% da largura do viewport porém ele leva em consideração as mudanças dinâmicas na interface do equipamento que se esta usando no momento.

Abaixo mostrarei alguns exemplos:

<div class="container">
  <div class="content">
    Tamanho ajustado dinamicamente com DVW e DVH
  </div>
</div>

.container {
  width: 50dvw; 
  height: 50dvh; 
  background-color: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.content {
  font-size: 1rem;
  color: blue;
}

O width 50dvw define que a largura do elemento como 50% de largura dinamizada do viewport. Se você abrir um teclado virtual no celular, o sistema ajustará automaticamente o tamanho do elemento ao qual foi imposta a regra. E da mesma forma, se a altura visível mudar, o sistema ajustará automaticamente o tamanho.

Então, a grande diferença entre o VW/VH e o DVW/DVH é que o VW e VH não se ajustam dinamicamente as alterações como a abertura do teclado. Já o DVH e DVW se ajustam dinamicamente e no momento da utilização da aplicação, em tempo real, essa unidade de medida é muito útil para dispositivos moveis

Essa foi uma explicação breve de o que é e como usar VW, VH, DVH e DVW no CSS, espero que tenham gostado.

Referências: CSS | MDN (mozilla.org)

Não deixe de ler: CSS Rain Effect – FrontMaster