vw, vh y unidades porcentuales

Las unidades de viewport y los porcentajes parecen «relativos», pero responden preguntas distintas.

vw y vh

• 1vw = 1% del ancho del viewport
• 1vh = 1% del alto del viewport

En un viewport de 1440px de ancho:

.hero {
  padding-inline: 5vw; /* 72px */
}

Las unidades de viewport son útiles para:

• Padding y gaps horizontales fluidos
• Secciones full-bleed que escalan con el ancho de pantalla
• Tipografía hero cuando se combina con clamp()

Cuidado con:

• La UI del navegador móvil cambiando el alto efectivo del viewport
• Viewports muy pequeños produciendo valores diminutos o enormes si se usan solas
• Accesibilidad: texto dimensionado solo con vw puede volverse demasiado pequeño en pantallas estrechas

Unidades porcentuales

50% es relativo al bloque contenedor, no siempre al viewport.

.sidebar {
  width: 30%;
}

.card-title {
  font-size: 120%; /* relativo al font-size del padre */
}

Los porcentajes son útiles para:

• Layouts de columnas dentro de un contenedor conocido
• Imágenes y medios que deben llenar el ancho del padre
• Escalado de tipografía anidada

El mismo % puede significar ancho del cuadro padre o font-size del texto padre según la propiedad.

vw vs %

Pregunta	Mejor unidad
Escalar con ancho de pantalla globalmente	vw
Llenar un contenedor padre	%
Tipografía con límites min/max	clamp() con rem + vw
Columna de grid dentro de una tarjeta	% o unidades fr

Combina unidades de viewport con límites

Un patrón responsive habitual:

.section-title {
  font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}

El vw en bruto suele ser demasiado agresivo para texto de cuerpo. clamp() añade límites mínimo y máximo.

Conclusión clave

Usa vw/vh cuando el viewport es la referencia. Usa % cuando el cuadro padre o el font-size del padre es la referencia. Para tipografía, combina vw con rem mediante clamp().

Previsualiza cómo los valores px se mapean a vw en distintos anchos de viewport en el Conversor de unidades CSS / Generador clamp.