Uso de unidades de viewport dinâmicas

• No desktop, vw e vh representam bem o tamanho do viewport
• No mobile, o tamanho é afetado por UIs geradas dinamicamente, como barra de ferramentas e barra de endereço; por isso, 100vh pode ultrapassar o tamanho do viewport ou, quando a barra de endereço se retrai com o scroll, passar a corresponder ao tamanho do viewport
• O grupo de trabalho do CSS disponibilizou unidades que podem ser usadas de acordo com esses tamanhos que mudam dinamicamente, oferecendo dimensões que correspondem exatamente ao viewport real
  • Large viewport: lvh é usado quando não há UI gerada dinamicamente
  • Small viewport: svh é usado quando a UI retraída volta a se expandir
  • Dynamic viewport: dvh passa a ter o mesmo tamanho do viewport de acordo com o estado da UI dinâmica; compatível com Chrome 108, Firefox 101 e Safari 15.4