Unidades viewport

<< Unidades Unidades relativas >>

Cuando utilizamos estas unidades, estamos indicando que van a depender de la región que es visible de la web en el navegador (viewport) y por tanto que los elementos tengan valores proporcionales al tamaño de la ventana. 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 */
}

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).

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.

<< Unidades Unidades relativas >>