jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis Generador de unidades viewport dinamicas

Genera CSS con unidades viewport dinamicas (dvh, svh, lvh) con fallbacks.

Cargando herramienta...

Qué es Generador de unidades viewport dinamicas?

Las unidades de viewport modernas de CSS tienen tres variantes. Small viewport (svh) es la altura del viewport menos la interfaz del navegador. Large viewport (lvh) es la altura del viewport con la interfaz del navegador retraida. Dynamic viewport (dvh) se ajusta a medida que la interfaz del navegador aparece y desaparece. Son utiles para disenos de pantalla completa en moviles donde la barra de direcciones del navegador cambia el area visible.

Respuesta rápida

Use unidades de viewport dinamicas (dvh, svh, lvh) para disenos que necesiten ocupar correctamente el viewport movil cuando la interfaz del navegador se expande y retrae. Incluya siempre un fallback clasico de vh para navegadores antiguos.

Last updated: 2026-06-11

Limitaciones

  • Las unidades de viewport dinamicas solo son relevantes en navegadores moviles donde la barra de direcciones y otros elementos de la interfaz se expanden y retraen. En escritorio, dvh, svh y lvh se comportan identicamente a vh.
  • Algunos navegadores actualizan dvh al final del desplazamiento en lugar de continuamente, lo que puede causar un salto visible en la altura del elemento al retraerse la barra de direcciones.
  • En navegadores moviles, dvh cambia cuando aparece el teclado en pantalla. Los formularios, campos de busqueda e interfaces de chat que dependen de dvh para disenos de pantalla completa pueden redimensionarse inesperadamente cuando el usuario comienza a escribir.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Elija el tipo de unidad: svh, lvh, dvh, svw, lvw o dvw.
  2. Establezca un valor porcentual para la unidad de viewport, como 100 para altura completa.
  3. Elija la propiedad CSS a la que aplicara la unidad de viewport, como min-height o height.
  4. Copie la declaracion CSS con la unidad moderna y un fallback clasico de vh.

Para qué puedes usarla

  • Crear una seccion hero que ocupe la pantalla visible exacta en dispositivos moviles.
  • Evitar que el contenido quede oculto detras de la barra de herramientas del navegador movil al hacer scroll.
  • Construir paneles de pantalla completa que se adapten a los cambios de tamano del viewport a medida que la interfaz del navegador aparece y se retrae.

Casos de uso

Ejemplos prácticos

Ejemplo

Hero movil con svh

Una seccion hero usa min-height: 100svh para ocupar la pantalla considerando la barra de direcciones del movil. El fallback clasico de vh cubre navegadores antiguos.

Ejemplo

Navegacion inferior con dvh

Una barra de navegacion inferior usa bottom: 0 con padding-bottom basado en dvh para mantenerse sobre el indicador de inicio y adaptarse cuando la barra de direcciones se retrae.

Errores comunes

  • Usar dvh para cada elemento cuando svh o lvh proporcionarian un comportamiento mas estable para el caso de uso especifico.
  • No proporcionar un fallback clasico de vh o vw para navegadores que no admiten unidades de viewport dinamicas.
  • Usar unidades de viewport dinamicas para disenos de escritorio donde la unidad vh simple funciona perfectamente.

Verificación

  1. Cargue la pagina en un dispositivo movil o emulador y desplace para confirmar que la altura del elemento se ajusta correctamente a medida que la barra de direcciones del navegador se retrae.
  2. Pruebe con la interfaz del navegador tanto expandida como retraida para verificar que los valores de svh y lvh produzcan el area visible esperada.

FAQ

Preguntas sobre Generador de unidades viewport dinamicas

Cuando deberia usar dvh en lugar de vh?

Use dvh cuando el elemento deba ocupar el area visible exacta y adaptarse a medida que cambia la interfaz del navegador. Use vh para casos mas simples o cuando prefiera una altura estable y sin cambios.

Que navegadores admiten unidades de viewport dinamicas?

Chrome 108+, Edge 108+, Safari 15.4+ y Firefox 101+. Proporcione un fallback clasico de vh o vw para versiones de navegadores antiguos.

Cual es la diferencia entre svh, lvh y dvh?

svh (small viewport height) es la altura cuando la interfaz del navegador esta expandida. lvh (large viewport height) es la altura cuando la interfaz del navegador esta retraida. dvh (dynamic viewport height) cambia entre ambas a medida que la interfaz aparece y desaparece durante el desplazamiento.

Las unidades de viewport dinamicas funcionan en escritorio?

En navegadores de escritorio, dvh, svh y lvh se comportan igual que vh porque los navegadores de escritorio no tienen elementos expandibles o retractiles que cambien el tamano del viewport. Las unidades dinamicas solo marcan una diferencia practica en dispositivos moviles.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también