Entendiendo las unidades de viewport en CSS: vw, vh, vmin y vmax
¿Qué son las unidades de viewport?
Las viewport units son unidades relativas al tamaño del área visible del navegador (el viewport). A diferencia de px, em o rem, se adaptan automáticamente cuando el usuario cambia el tamaño de la ventana, la orientación del dispositivo o la densidad de píxeles.
1vw= 1 % del ancho del viewport.1vh= 1 % de la altura del viewport.1vmin= 1 % del menor entre ancho y altura del viewport.1vmax= 1 % del mayor entre ancho y altura del viewport.
Uso práctico de cada unidad
vw – Ancho del viewport
Ideal para tipografía fluida, márgenes horizontales y componentes que deben escalar con el ancho de la pantalla.
h1 {
font-size: 5vw; /* 5 % del ancho del viewport */
margin-left: 2vw;
}vh – Altura del viewport
Se usa para hero sections, modales a pantalla completa o cualquier elemento que dependa de la altura visible.
.hero {
height: 100vh; /* ocupa todo el alto de la ventana */
background: linear-gradient(to bottom, #1e90ff, #fff);
}vmin – El menor entre ancho y alto
Perfecto para crear elementos cuadrados que siempre mantengan la proporción, sin importar la orientación.
.square {
width: 30vmin;
height: 30vmin;
background: #ff6f61;
}vmax – El mayor entre ancho y alto
Útil para tipografía grande en pantallas ultra‑anchas o para efectos que deben llenar el eje dominante.
.big-text {
font-size: 8vmax;
text-align: center;
}Comparativa visual (dos columnas)
Ventajas
- Responsive por naturaleza, sin media queries.
- Facilitan diseños fluidos y tipografía adaptable.
- Menor dependencia de breakpoints.
Desventajas / Consideraciones
- Problemas de overflow en navegadores móviles antiguos.
- El
vhpuede incluir la barra de direcciones en móviles, generando tamaños inesperados. - Necesario combinar con
min‑max()oclamp()para evitar textos demasiado pequeños o gigantes.
Mejores prácticas y trucos avanzados
- Combinar con
clamp():font-size: clamp(1rem, 2.5vw, 2rem);garantiza un rango aceptable. - Fallback para navegadores sin soporte: declarar una unidad
pxantes de la reglavw/vh.h2 { font-size: 24px; font-size: 5vw; } - Uso en
calc(): mezclar unidades para diseños híbridos..sidebar { width: calc(20vw + 200px); } - Accesibilidad: evitar que el texto sea menor de 12 px en dispositivos con alto zoom, usando
min‑font‑sizeoclamp().
Depuración y troubleshooting
Al trabajar con vh en móviles, la barra de direcciones del navegador puede causar que el valor cambie al hacer scroll. Solución:
/* iOS Safari */
html, body { height: 100%; }
section.fullscreen { min-height: -webkit-fill-available; }
En navegadores antiguos (IE 11, Android 4.x) las unidades vmin/vmax pueden no estar soportadas. Se recomienda usar polyfills como viewport-units-buggyfill.
Rendimiento y escalabilidad
Las unidades de viewport son procesadas por el motor de renderizado sin coste adicional significativo. Sin embargo, combinarlas con animaciones transform o opacity garantiza una composición GPU‑friendly.
.slide-in {
transform: translateY(100vh);
transition: transform 0.4s ease-out;
}
Para grandes aplicaciones SPA, reutiliza variables CSS para centralizar los valores:
:root {
--vh: 1vh; /* se actualiza vía JS en dispositivos móviles */
}
.full-height { height: calc(var(--vh) * 100); }
Compatibilidad
| Navegador | Soporte vw/vh | Soporte vmin/vmax |
|---|---|---|
| Chrome (desde 29) | ✔ | ✔ |
| Firefox (desde 19) | ✔ | ✔ |
| Safari (desde 9) | ✔ | ✔ |
| Edge (Chromium) | ✔ | ✔ |
| IE 11 | ✔ | ✖ (solo vw/vh) |
| Android WebView (4.4) | ✔ | ✖ |
Para garantizar una experiencia homogénea, siempre provee fallback en px y verifica con @supports (width: 1vw).
Ejemplo completo: Landing page responsive con solo viewport units
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Viewport Units</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
:root { --vh: 1vh; }
@media (orientation: portrait) { :root { --vh: 1vh; } }
.hero { height: calc(var(--vh) * 100); background: #1e90ff; color: #fff; display:flex; align-items:center; justify-content:center; }
h1 { font-size: clamp(2rem, 10vw, 5rem); }
.features { padding: 5vmin 0; }
.feature { width: 30vmin; height: 30vmin; background:#ff6f61; margin:auto; display:flex; align-items:center; justify-content:center; font-size:2vmin; color:#fff; border-radius:0.5rem; }
</style>
</head>
<body>
<section class="hero"> <h1>¡Bienvenido!</h1> </section>
<section class="features container text-center">
<div class="row g-4">
<div class="col-md-4"><div class="feature">UX</div></div>
<div class="col-md-4"><div class="feature">Performance</div></div>
<div class="col-md-4"><div class="feature">Accessibility</div></div>
</div>
</section>
</body>
</html>
Este código muestra cómo usar vh para la altura del hero, vmin para los bloques cuadrados y clamp() para tipografía adaptable, sin necesidad de breakpoints.
Entendiendo las unidades de viewport en CSS: vw, vh, vmin y vmax