Diferença entre usar vh, vw e porcentagem (%) no CSS

No desenvolvimento web, a escolha das unidades de medida pode ter um impacto significativo na responsividade da sua aplicação, inclusive, o teor deste conteúdo é mostrar as unidades de medida “vh” (Viewport Height), “vw” (Viewport Width) e “%” (Percentagem), destacando suas diferenças e usos comuns.

Unidade de medida “vh” (viewport height)

Em resumo, a unidade “vh” no CSS representa a porcentagem da altura da viewport, ou seja, a parte visível da janela do navegador. Então, ela é uma unidade de medida relativa à altura do dispositivo do usuário. Por exemplo, 10vh é igual a 10% da altura da viewport.

Unidade de medida “vw” (viewport width)

Para mais contexto, també podemos dizer que a unidade “vw” no CSS, por outro lado, representa a porcentagem da largura da viewport, ou seja, a parte visível da janela do navegador em relação à largura do dispositivo do usuário. Logo, similar ao “vh,” 10vw é igual a 10% da largura da viewport.

Entenda definitivamente vh e vw

• vh: mede em relação à altura da viewport.
• vw: mede em relação à largura da viewport.

Unidade de medida “%” (percentagem)

Em resumo, a unidade “%” é uma medida relativa que se baseia no elemento pai. Por exemplo, quando você aplica “%” a um elemento, ele calcula a porcentagem com base na largura ou altura do elemento pai.

Exemplo da diferença de vh para porcentagem no CSS com um Botão flexível

.button {
  width: 50%; /* 50% da largura do elemento pai */
  height: 5vh; /* 5% da altura da viewport */
}

Principais diferenças de vh para porcentagem “%”

Agora, vou falar sobre as principais diferenças entre as duas unidades:

Referência de medição

• vh: Mede em relação à altura da viewport.
• %: Mede em relação à altura ou largura do elemento pai.

Comportamento responsivo

• vh: Mantém o dimensionamento em relação à altura da viewport, tornando-o útil para elementos que devem permanecer proporcionais à altura da tela.
• %: Ajusta-se com base no elemento pai, tornando-o adequado para layouts que dependem do tamanho do elemento pai.

Uso comum

• vh: Ideal para definir tamanhos de tela de fundo, imagens de capa ou elementos que devem preencher a tela inteira verticalmente.
• %: Usado para layouts responsivos e redimensionáveis, onde as dimensões são relativas ao tamanho do contêiner pai.

Exemplos de uso

Aqui estão alguns exemplos práticos muito utilizados pela web, inclusive em nossos sites que desenvolvemos para ilustrar as diferenças:

Exemplo 1: imagem de fundo

.header {
  height: 100vh; /* Preenche 100% da altura da viewport */
}

Exemplo 2: layout responsivo

.container {
  width: 80%; /* 80% da largura do elemento pai */
}

Depende de você entre usar “vh” ou “%” no CSS. Vai depender muito do comportamento desejado para o dimensionamento de elementos em seu layout.

O uso adequado dessas unidades de medida contribuirá para uma experiência de usuário mais consistente e responsiva em seu site ou aplicativo web, reduzindo drásticamente a quantidade de estilos CSS no seu arquivo.