Porcentaje y unidades de viewport

% y las unidades de viewport (vw, vh, vmin, vmax) son relativas a algo externo al elemento: su contenedor o la ventana del navegador. Por eso producen diseños fluidos que se adaptan al entorno — y por eso no son validables con checks automáticos en el sandbox (el entorno varía según el tamaño del preview).

% — relativo al padre

% siempre se calcula como un porcentaje de un valor del elemento padre (o ancestro). El “qué” del padre depende de la propiedad que se está usando:

Propiedad	`%` es relativo a…
`width: 50%`	Ancho del bloque contenedor (padre)
`height: 50%`	Alto del bloque contenedor, pero solo si el padre tiene altura explícita
`padding: 10%`	Ancho del bloque contenedor (¡siempre el ancho, aunque sea `padding-top`!)
`margin: 10%`	Ancho del bloque contenedor (ídem)
`font-size: 80%`	`font-size` del elemento padre

/* Si el padre mide 800px de ancho, .columna mide 400px */
.columna {
  width: 50%;
}
/* Si el padre se achica a 600px, .columna pasa a medir 300px — se adapta */

El detalle que sorprende — padding en % va contra el ANCHO del padre, siempre:

.caja {
  width: 400px;
  padding: 10%;   /* = 40px — incluso para padding-top y padding-bottom */
}

Esto es contra-intuitivo pero está en la especificación CSS. En la práctica, rara vez se usa padding en %.

Cuándo usar %:

Columnas fluidas: width: 50% para dos columnas de igual ancho
Imágenes responsive: img { max-width: 100%; } — la imagen nunca supera su contenedor
El patrón width: 100% + max-width (lo ves en la próxima lección con max-width)

vw, vh, vmin, vmax — relativo al viewport

Las unidades de viewport son relativas al tamaño de la ventana del navegador (el viewport), no al contenedor del elemento:

Unidad	Definición	Ejemplo con viewport de 1200×800
`vw`	1% del ancho del viewport	`100vw` = 1200px
`vh`	1% del alto del viewport	`100vh` = 800px
`vmin`	1% de la dimensión menor (mínimo entre vw y vh)	`1vmin` = 8px
`vmax`	1% de la dimensión mayor (máximo entre vw y vh)	`1vmax` = 12px

/* Sección hero que ocupa toda la pantalla */
.hero {
  width: 100vw;
  height: 100vh;
  background: #1e293b;
  color: white;
}

Casos de uso:

height: 100vh — sección de bienvenida que ocupa la pantalla completa
width: 100vw — elemento que se extiende de borde a borde, ignorando el contenedor
font-size: 5vw — tipografía que escala con el ancho de la ventana (combinado con clamp() en diseño responsive, CAT-27)

Diferencia entre % y vw:

/* % es relativo al CONTENEDOR */
.caja { width: 100%; }     /* 100% del padre */

/* vw es relativo a la VENTANA del navegador */
.caja { width: 100vw; }    /* 100% de la ventana, sin importar el padre */

Limitación de `%` y viewport units en el sandbox

Transparencia sobre el preview: en el sandbox de esta plataforma, el preview vive dentro de un <iframe>. Esto tiene una consecuencia directa:

vw y vh dentro del iframe se resuelven contra el viewport del iframe (que puede medir apenas 300-400px de ancho), no contra tu ventana del navegador.

width: 50% computa a px del contenedor del iframe, que varía con el tamaño del panel del sandbox.

Por eso estas unidades no son validables con checks automáticos en este entorno: el resultado en px sería distinto en cada pantalla.

Para ver el efecto real de 100vh o width: 50%, podés usar el botón de “abrir preview en pestaña nueva” (si está disponible) o probarlo directamente en un archivo HTML en tu navegador.

Igual podés pegar estos snippets en el sandbox y observar el efecto visual — solo que el validador no va a chequearlo.

/* Probalo en el preview: el contenedor se adapta al ancho del iframe */
.columna-mitad {
  width: 50%;
  background: #bae6fd;
}

/* La caja va a ocupar todo el alto del iframe visible */
.pantalla-completa {
  height: 100vh;
  background: #1e293b;
  color: white;
}

Resumen: % y las viewport units son herramientas para diseños fluidos y responsivos. % depende del contenedor; vw/vh dependen de la ventana. En la próxima lección aprendés a combinar fluidez con topes usando min-width y max-width.