Para que são usadas as unidades de medida vh e vw ao especificar tamanhos em CSS?

As unidades de medida vh e vw em CSS são usadas para indicar tamanhos relativos às dimensões da área de visualização (viewport) do navegador.

• vh (altura da viewport): Representa 1% da altura da área de visualização.
• vw (largura da viewport): Representa 1% da largura da área de visualização.

O seu principal objetivo é criar um design responsivo, onde os tamanhos dos elementos dependem das dimensões atuais da janela do navegador, e não de valores fixos em pixels ou tamanhos de elementos pai. Isso permite escalar facilmente elementos como seções de altura ou largura completas, fontes, imagens e outros componentes, garantindo uma experiência de visualização confortável em dispositivos com tamanhos de tela diferentes.

Por exemplo:

• height: 100vh; — faz com que o elemento tenha altura de 100% da altura da área de visualização.
• width: 50vw; — faz com que o elemento tenha largura de 50% da largura da área de visualização.