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.
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.
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.
.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.
Veja este exemplo no CodePen ViewPorts examples
Top comments (2)
Amassou no artigo ein? O quando usar/quando evitar foram a cereja do bolo!
Po Camilo, obrigadao mano, isso vindo de voce vale muito pra mim <3