Página 25 de 96
Clase: Dominio de las Unidades de Medida del Viewport en CSS: vh, vw, vmin y vmax
Aprende a utilizar las unidades de medida del viewport en CSS (vh, vw, vmin y vmax) para crear diseños web adaptables y responsivos que se ajusten al navegador.
En el desarrollo web moderno, la creación de interfaces que se comporten de manera fluida en cualquier pantalla es fundamental. Esta lección profundiza en cómo las unidades relativas al viewport permiten a los desarrolladores definir tamaños de elementos basados en el área visible del navegador, asegurando un diseño coherente tanto en dispositivos móviles como en equipos de escritorio.
Puntos Clave de la Lección
- Definición del Viewport: Se explica el viewport como toda el área visible donde se muestra la aplicación web en el navegador, siendo esencial incluir la etiqueta meta correspondiente en el código HTML para un correcto funcionamiento. [00:00:15]
- Unidades Viewport Height (vh) y Width (vw): El vh representa un porcentaje de la altura total del viewport, mientras que vw representa un porcentaje de su anchura. Estas unidades permiten escalar elementos dinámicamente según el tamaño de la ventana. [00:01:00]
- Aplicación práctica de vh: Se demuestra cómo configurar un elemento para que ocupe una fracción específica de la altura total (como 50vh para la mitad o 100vh para la totalidad), observando cómo los valores se calculan automáticamente en píxeles. [00:02:52]
- Funcionamiento de Viewport Minimum (vmin): Esta unidad toma como referencia el lado más corto del viewport (ya sea alto o ancho), lo cual es ideal para mantener proporciones consistentes independientemente de la rotación del dispositivo. [00:05:35]
- Funcionamiento de Viewport Maximum (vmax): Por el contrario, vmax selecciona el lado de mayor dimensión del viewport, permitiendo que los elementos se adapten automáticamente al eje más largo del área visible. [00:06:24]
Productos útiles para este curso
Para aplicar estas técnicas de CSS de manera efectiva, se recomienda contar con un editor de código optimizado como Visual Studio Code y un navegador moderno con herramientas de desarrollo (DevTools) para visualizar en tiempo real cómo cambian los valores calculados en píxeles al redimensionar el viewport. Resumen Final
El uso correcto de las unidades del viewport (vh, vw, vmin, vmax) es una habilidad clave para lograr diseños responsivos precisos. Al basar las dimensiones en el espacio real de visualización del usuario, se garantiza que los elementos de la interfaz, como secciones de página o contenedores, mantengan una estructura sólida sin importar el dispositivo, desde un smartphone hasta un monitor de gran tamaño.
Créditos del Autor
Esta lección ha sido adaptada del contenido original creado por el canal, especializado en desarrollo web y programación frontend. Se recomienda visitar su canal oficial de YouTube para profundizar en estos contenidos.
25. CURSO de CSS - 25 UNIDADES de MEDIDA del VIEWPORT en CSS (VIEWPORT UNITS VW y VH)
