OmbuShop Crea Tu Tienda Online

Unidades relativas al viewport en CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Pocos conocen las nuevas unidades relativas del módulo de Units de CSS3. Entre las novedades, tenemos la posibilidad de establecer medidas que dependen del viewport, es decir, el tamaño de la ventana del navegador. Veamos cómo se usan!

Como sabemos, tenemos dos tipos de unidades de medida en CSS: las unidades de medida absolutas y las relativas. Entre las unidades de medida absolutas, tenemos: px (pixels), pt (puntos), pc (picas), in (pulgadas), q (cuartos de milímetro), mm (milímetros) y cm (centímetros).

Del lado de las unidades de medida relativas, tenemos: em (cuerpo tipográfico), rem (cuerpo tipográfico del root), ex (altura de x), ch (ancho del 0), % (porcentaje) y las relacionadas al viewport: vw, vh, vmin y vmax.

Medidas relativas al viewport

Veremos en profundidad cada una de las nuevas unidades de medida que tienen relación con el viewport del navegador.

vw: viewport width

Esta unidad de medida funciona como porcentaje del ancho total del viewport. Por lo que si queremos que cierto elemento mida, a lo ancho, lo mismo que el viewport, deberíamos indicarle width: 100vw;

A continuación veremos un ejemplo.


See the Pen mHtob by Lucas Mourelle (@lucasmourelle) on CodePen.
0

 

vh: viewport height

Similar a la unidad vw, la unidad de medida vh se refiere al porcentaje del alto total del viewport. Es una medida muy utilizada en sitios que tienen “pisos” de diseño, de forma tal que cada uno de estos “pisos” del HTML midan lo mismo que el alto de la ventana.


.section {
height: 100vh; /* alto del viewport */
}

/* Detalles cosméticos */
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 36px;
}
.section {
background-color: #6f0;
}
.section:first-child {
background-color: #f60;
}
h1 {
padding-top: 1em;
padding-bottom: 1em;
}

See the Pen xLCpD by Lucas Mourelle (@lucasmourelle) on CodePen.
0

 

vmin: viewport min

En este caso también se trata del porcentaje de la medida actual del viewport, pero se calcula con respecto al lado más corto. Es decir que si el ancho del viewport es más corto que el alto, entonces vmin será lo mismo que utilizar vw. Por el contrario, si el alto del viewport es más corto que el ancho, entonces vmin será lo mismo que vh.


.section {
width: 100vmin; /* lado más corto del viewport */
height: 100vmin; /* lado más corto del viewport */
}

/* Detalles cosméticos */
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 36px;
}
.section {
background-color: #6f0;
}
.section:first-child {
background-color: #f60;
}
h1 {
padding-top: 1em;
padding-bottom: 1em;
}

See the Pen tFpsa by Lucas Mourelle (@lucasmourelle) on CodePen.
0

 

vmax: viewport max

Justo a la inversa de vmin: se trata del porcentaje de la medida actual del viewport, pero se calcula con respecto al lado más largo. Es decir que si el ancho del viewport es más largo que el alto, entonces vmin será lo mismo que utilizar vw. Por el contrario, si el alto del viewport es más largo que el ancho, entonces vmin será lo mismo que vh.


.section {
width: 100vmax; /* lado más largo del viewport */
height: 100vmax; /* lado más largo del viewport */
}

/* Detalles cosméticos */
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 36px;
}
.section {
background-color: #6f0;
}
.section:first-child {
background-color: #f60;
}
h1 {
padding-top: 1em;
padding-bottom: 1em;
}

See the Pen tEsDc by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Para ver cuál es el nivel de soporte de estas unidades de medida en los diferentes navegadores, pueden remitirse a Can I Use.

¡Adelante, a probar las nuevas unidades de medida relativas de CSS3!