Unidades viewport

<< Unidades Unidades relativas >>

Las unidades de viewport en CSS son unidades de medida relativas que se basan en las dimensiones del área visible de la ventana del navegador, conocida como viewport. A diferencia de los píxeles (px) que son fijos o los porcentajes (%) que son relativos al elemento padre, estas unidades son relativas al tamaño del viewport, lo que las hace increíblemente útiles para crear diseños web responsive que se adaptan a diferentes tamaños de pantalla (móviles, tablets, pcs). Estas unidades vienen precedidas por la letra v, haciendo referencia a un % del tamaño total de la ventana.

.container {
      width: 50vw; /* Si el navegador ocupa 800px de ANCHO, estamos diciendo que el contenedor
                                  ocupe 400px de ANCHO*/
      height: 50vh; /* Si el navegador ocupa 800px de ALTO, estamos diciendo que el contenedor ocupe
                                   400px de ALTO*/
}

.container {
      width: 50vmin; /* Si el navegador ocupa 800x600(ancho x alto), estamos diciendo que el
                                       contenedor ocupe de ancho la mitad de 600, es decir 300px*/
      height: 50vmax; /* Si el navegador ocupa 800x600(ancho x alto), estamos diciendo que el  
                                         contenedor ocupe de alto la mitad de 800, es decir 400px*/
}

.container {
      width: 50vi; /* Equivale a 50vw, ya que inline es la dirección horizontal */
      height: 50vb; /* Es la dirección vertical */
}

Una unidad de vw equivale al 1% del ancho del viewport. Si la ventana del navegador tiene un ancho de 1000 píxeles, 1vw será igual a 10 píxeles. Esta unidad es ideal para establecer tamaños de fuente, anchos de elementos o márgenes que deben escalar proporcionalmente con el ancho de la pantalla.

vw (viewport width, donde 1vw = 1% del ancho del navegador), vh (viewport hegiht, donde 1vh = 1% del alto del navegador), vmin (viewport mínimo, donde 1vmin = 1% del mín(ancho, alto) del navegador), vmax (viewport máximo, donde 1vmax = 1% del max(ancho, alto) del navegador), vi (viewport inline de vw y/o vh), vb(viewport block de vw y/o vh).

Unidades relativas al contenedor

Las unidades anteriores son relativas al viewport, pero si queremos que sean relativas al contenedor usaremos la letra cq delante, es decir, cqw, cqh, cqmin, cqmax, cqi ó cqb. Esto te da un control mucho más granular y predecible sobre el diseño de componentes individuales.

Para usarlas, primero necesitas "activar" un elemento como contenedor con la propiedad container-type. Las unidades principales son:

  • cqw: 1% del ancho del contenedor.
  • cqh: 1% del alto del contenedor.
  • cqi: 1% del tamaño en el eje "inline" (generalmente el ancho) del contenedor.
  • cqb: 1% del tamaño en el eje "block" (generalmente el alto) del contenedor.
  • cqmin: El valor más pequeño entre cqi y cqb.
  • cqmax: El valor más grande entre cqi y cqb.

Ejemplo: Queremos que el tamaño de un título se adapte al tamaño de la tarjeta que lo contiene

/* Primero, definimos un elemento como contenedor */
.card-container {
    container-type: inline-size;
    /* Lo declaramos contenedor basado en su ancho */
}

/* Ahora, usamos unidades de contenedor en sus hijos */
.card-container h2 {
    font-size: 8cqw;
    /* El tamaño de la fuente será el 8% del ancho de .card-container */
}
  • Usa unidades de viewport cuando quieras que un elemento escale en relación con la ventana completa del navegador.
  • Usa unidades de contenedor cuando quieras crear componentes autónomos que se adapten de forma inteligente al espacio que se les da, haciendo tus diseños mucho más robustos y modulares.

Veamos un ejemplo completo para ambos casos:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Viewport vs Container Units</title>
    <link rel="stylesheet" href="1.relativasv.css">
</head>

<body>
    <main>
        <article>
            <h2>Ejemplo 1: Unidades Relativas al Viewport (vw, vh)</h2>
            <div class="box-viewport">
                <p>Mi ancho es <strong>50vw</strong> y mi alto es <strong>25vh</strong>.</p>
                <p>Mi tamaño de fuente es <strong>1.5vw</strong>.</p>
                <p>Dependo 100% del tamaño de la ventana del navegador.</p>
            </div>
        </article>
        <article>
            <h2> Ejemplo 2: Unidades Relativas al Contenedor (cqw)</h2>
            <div class="container-padre">
                <div class="box-container">
                    <p>Mi ancho es <strong>50cqw</strong>.</p>
                    <p>Mi tamaño de fuente es <strong>3cqw</strong>.</p>
                    <p>Dependo 100% del tamaño de mi padre (el div gris).</p>
                </div>
            </div>
        </article>
    </main>
</body>

</html>

<< Unidades Unidades relativas >>