Uso de unidades de viewport dinámico

• En escritorio, vw y vh representan bien el tamaño del viewport
• En móvil, el tamaño se ve afectado por interfaces que aparecen dinámicamente, como la barra de herramientas o la barra de direcciones. Por eso, 100vh puede exceder el tamaño del viewport o ajustarse a él cuando la barra de direcciones se contrae al hacer scroll
• El CSS Working Group proporcionó unidades que pueden usarse para adaptarse a estos cambios dinámicos de tamaño y ofrecer dimensiones que coinciden exactamente con el viewport real
  • Large viewport: lvh se usa cuando no hay UI generada dinámicamente
  • Small viewport: svh se usa cuando una UI contraída vuelve a expandirse
  • Dynamic viewport: dvh se iguala al tamaño del viewport según el estado de la UI dinámica; compatible con Chrome 108, Firefox 101 y Safari 15.4