[PT-BR] Unidades de Viewport no CSS: Além do VH
Tags: css, frontend, mobile, responsivedesign
Published: 2023-10-05 10:25:06

Bom, este texto parte de um deslumbrado que acabou de descobrir uma coisa e quer contar pra todo mundo, ate algumas horas atras eu nao sabia que existiam outras unidades de viewport alem de vh/vw, e como eu percebi isso? Tendo problemas de responsividade pra resolver e indo atras de soluções, acontece que eu implementei um modal que deve ocupar 100% da altura da pagina, então '100vh' funcionou muito bem…no desktop, o problema apareceu de verdade quando eu testei usando um dispositivo mobile, aqui abaixo eu explico o problema e como eu resolvi.

Neste artigo vou tentar falar um pouco das novas unidades de viewports CSS: svh, svh, dvh. Mas antes, vamos tentar entender algumas coisas antes de nos aprofundarmos.

## O que é Viewport ?
Resumidamente, viewport é a area visível de uma pagina web em um dispositivo, obviamente o tamanho do viewport varia de acordo com o dispositivo, com o browser e pode ate ser alterado pelo usuario se ele redimensionar a janela do navegador.
![browsers examples](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yt4hx7gfr7d8h3o3q4ws.png)


## VH — Viewport Height
O “VH” foi introduzido no modulo 3 do CSS e é uma unidade relativa do CSS, ele permite que os elementos da pagina sejam dimensionados de acordo com o tamanho da tela, criando um layout responsivo, sendo assim, o ‘vh’ representa uma porcentagem da altura do viewport.

_1vh = 1% da altura do viewport._

```
.foo {
height: 50vh;  /* O elemento terá 50% da altura do viewport */
}
```


## Problemas do VH
Bom, o ‘vh’ trouxe muitas melhorias, mas para desktops, ja nos dispositivos mobile, tivemos alguns problemas, pois alguns navegadores tinham a barra de navegação que ocupa um espaço da tela, e geralmente essa barra fica por cima do conteúdo da pagina, podendo dinamicamente expandir ou retrair de acordo com a direção que o usuário “scrolla” a página, por isso, o ‘vh’ pode ter comportamento inesperado em alguns dispositivos.


![Safari navigation bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6c23u8uh2wjqu9gyboj.png)

![viewport examples](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwwnky4on30d24oygocs.png)

Por causa desses problemas, a comunidade discutiu e chegou em algumas soluções:

## SVH — Small Viewport Height
O ‘svh’ é definido considerando o tamanho do viewport quando a barra de navegação (ou outros itens do navegador) esta expandida, ou seja, quando o navegador ocupa o máximo de espaço possível o conteúdo da pagina sera o menor possível.

Como no exemplo abaixo, ‘100svh’ irá ocupar o espaço da tela considerando a barra de navegação expandida, sem “sobrar” conteúdo por baixo da barra.

![viewport examples](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbglt1p9lvjrsw7pg8wo.png)

```
.container {
    height: 100svh; /* O elemento terá a altura do viewport considerando a UI expandida */
}
```

**Quando usar:**
Quando desejar garantir que o conteúdo não será coberto pela UI do navegador.

**Quando evitar:**
Se a UI do navegador estiver retraída, pois pode haver espaço em branco extra.

## LVH — Large Viewport Units
Ja o ‘lvh’ podemos dizer que é o contrario do ‘svh’, ele é definido considerando o tamanho do viewport quando a barra de navegação ou outros itens do navegador estão retraídos, sendo assim, quando o navegador ocupa o minimo de espaço possível, o conteúdo da página será o maior possível, praticamente o ‘lvh’ age de forma semelhante ao ‘vh’.

```
.container {
    height: 100lvh; /* O elemento terá a altura do viewport considerando a UI retraída */
}
```

**Quando usar:**
Para maximizar o espaço de conteúdo quando a UI do navegador estiver retraída.

**Quando evitar:**
Se a UI do navegador estiver expandida, pois o conteúdo pode ser coberto.

## DVH — Dynamic Viewport Units
O Dinamyc Viewport, como o nome ja diz, é dinâmico, ele adapta/ajusta automaticamente o tamanho do conteúdo de acordo com a UI do navegador, seja expandida ou retraída, apesar disso parecer perfeito, é necessário estar atento, pois usar ‘dvh’ pode causar redimensionamento de conteúdo quando o usuario scrolla a pagina, oque pode causar incomodo e uma UX ruim, além de poder ser custoso em termos de performance.

```
.container {
    height: 100dvh; /* A altura do elemento se ajustará dinamicamente com a UI do navegador */
}
```

**Quando usar:**
Quando desejar um ajuste dinâmico da altura conforme a UI do navegador muda.

**Quando evitar:**
Se o redimensionamento dinâmico puder distrair o usuário ou afetar negativamente a experiência do usuário.

<p class="codepen" data-height="300" data-theme-id="dark" data-slug-hash="zYymVNL" data-user="leonardo-muniz-the-typescripter" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>Veja este exemplo no CodePen <a href="https://codepen.io/leonardo-muniz-the-typescripter/pen/zYymVNL">
  ViewPorts examples</a> 
  </span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>