vw y vh, no se como he podido vivir sin ellos.

abril 22, 2015

Cuando empecé a escribir este blog el mundo de desarrollo web esta dominado por “nuestro amigo IE”. Usar CSS avanzado era imposible. El CSS3 era una muy muy lejana promesa. Pero ahora las cosas han cambiado. Hay competencia entre navegadores, y lo que es mas importante: colaboración. Los nuevos estándares se implementan, sin esperara a la aprobación del W3C (que nunca llega).

Una de las novedades que ya puedes utilizar con seguridad son las nuevas unidades relativas: vw y vh, que hacen referencia al tamaño del viewport. vx es un 1% del ancho, y vh es un 1% del alto. La diferencia con el viejo % es notable:

  • 1 vx siempre vale lo mismo en cualquier elemento. Por contra,  %  es relativa contenedor del  elemento actual.
  • Se pueden ‘mezclar’. Por ejemplo, como hacer que un elemento sea un cuadrado con un ancho del 25%. Fácil: width:25vx; height: 25vx. Con % no hay manera ya que poner height:25% no equivale a un 25 del ancho, sino del alto. Un sutil cambio consistente en usar dos unidades vx, y vh frente a un único simbolo %, simplifica enormente el CSS.
  • Permite un mayor control tipográfico de titulares. Basta usar font-size: 5vx y la fuente se adapta a la ventana del navegador.
  • Hacer una presentación web. y dividir cada parte en una ventana es fácil: .parte { height: 100vh}
  • Estirar la página hasta el final:  body { min-height: 100vh}

Resumiendo, una idea genial !!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: