Unidades CSS viewportwidth y viewportheight

  • Por
  • y  
Nuevas unidades de CSS3: viewportwidth y viewportheight. Cómo podemos hacer un útil uso de ellas al aplicarlas a tamaños de las tipografías.

En este artículo vamos a hablaros de dos unidades nuevas de CSS, que tienen especial utilidad en el diseño adaptable (conocido como "responsive") y que vienen a solucionar algunas necesidades a la hora de definir tamaños en dispositivos, sobre todo útiles para las fuentes (o tipografías). Se trata de las unidades CSS3 "viewportwidth" y "viewportheight", que son relativas a la anchura y altura del dispositivo, respectivamente.

Estas unidades son una opción interesante para definir alturas y anchuras en dispositivos. Las unidades son abrevidadas con las siglas "vw" y "vh". Su medida es equivalente a un centésimo de la anchura o altura del dispositivo donde se está visualizando la web. Por ejemplo, si deseamos asignarle a un elemento una altura igual al tamaño completo del dispositivo, le aplicaremos el valor 100vp.

Por expresarlo mediante porcentajes, 1vw = 1% de la anchura del dispositivo. Por su parte, 1vh = 1% de la altura del dispositivo.

Nota: Para entender mejor estas medidas, si es que no lo sabes ya, te interesa saber lo que es el "Viewport". En resumen, viewport es igual a las dimensiones de la pantalla de tu móvil o tableta, mientras que en ordenadores de escritorio serían las dimensiones de la ventana del navegador.

La pega del viewportheight, bastante importante, es que solo funciona en dispositivos móviles y no en ordenadores de escritorio. Pero aun así merece la pena conocer y aplicar cuando realmente le podamos sacar partido, siempre en teléfonos y tabletas, porque en desktop tiene unos comportamientos un poco erráticos.

Uso de viewportheight para definir alturas de una manera cómoda

Las alturas en CSS siempre son un quebradero de cabeza cuando se quiere usar medidas relativas, con unidades como "%" de CSS. Seguramente que si tenemos algo de experiencia sobre maquetación web se sabe de lo que estamos hablando. Para tener las alturas "controladas" con unidades relativas de CSS tenemos que darle dimensiones de altura a todos los contenedores. O sea, definir las dimensiones de height de todos los elementos de la jerarquía del documento hasta llegar al elemento que realmente queramos definir su altura con un valor porcentual. La opción para alturas es el viewportheight

El correspondiente "compañero" de Viewportheight para las anchuras, viewportwidth, no es tan crucial para definir las dimensiones width, debido a que los comportamientos de unidades CSS para las anchuras no nos dan ningún problema. Pero no conviene perderlo de vista, especialmente pensando en las tipografías.

Medidas "viewport" para tipografías

Estas medidas, tanto viewportheight como viewportwidth, tienen un comportamiento especial que merece la pena mencionar. ¡Se puede usar en la tipografía! Esto quiere decir que podemos asignarle medidas en viewportwidth a un texto y éste siempre te medirá lo mismo en todas las pantallas, relativamente a las dimensiones de la pantalla que tengamos. Para que nos enteremos, si definimos el tamaño de una fuente con viewportwidth, y si en un dispositivo vemos que ocupa un 50% de la anchura de su pantalla, podemos tener certeza de que, en todos los dispositivos ocupará más o menos ese mismo porcentaje de anchura de la pantalla, aunque estemos trabajando con una resolución diferente.

Lo asombroso de todo esto es que el tamaño de la letra es "responsive", o en castellano "adaptable", sin necesidad de utilizar ningún script para conseguirlo o de otras técnicas como mediaqueries que se podrían aplicar con CSS para intentar conseguir ese efecto de fluidez.

Os animamos a probar estas medidas de CSS para sacar vuestras conclusiones. Su uso no difiere de cualquier otro que puedas estar trabajando en tus hojas de estilo.

body{
font­size: 2.5vw
}
h1{
font­size: 4.8vh
}

Es una maravilla que podemos usar y al menos en dispositivos nos dará la tranquilidad de que esas fuentes se van a ver igual de grandes, relativamente al tamaño de la pantalla donde se esté mostrando la página.

Nota: Esta información la hemos extractado del evento transmitido en directo Unidades de medida CSS #designIO, realizado en DesarrolloWeb.com con la participación de Daniel Martínez @Wakkos y Daniel Ruiz @MrViSiOn2, que nos ofrecieron mucha información sobre unidades de medida en hojas de estilo en cascada y con la mente en el diseño adaptable. Si te interesan las medidas CSS más adecuadas para diseños adaptables te recomendamos leer también el artículo Unidades de medida CSS para fuentes Responsive Web Design.

Autor

Daniel Martínez

Daniel es un diseñador gráfico convertido a web que vive dentro de Internet desde el año 95. Amante del diseño y estilismo en las diferentes expresiones, siempre ha destacado creando diseños adaptados a las últimas tendencias. Es una de esas personas que ha formado parte de todas las generaciones dedicadas al diseño web, desde el estilo "Geocities" de los 90, hasta Responsive Web Design actualmente.
Diseñador gráfico convertido a web

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Jorge

19/9/2013
Si el navegador no soporte CSS3?
¿Qué ocurriría si se definen las unidades con esa medida y el navegador no soporte CSS3?

gio orozco

19/9/2013
excelente herramienta
que gran alivio por fin ya no se tienen que preocupar por que los textos se vean igual en todos los teléfonos.
pero solo tengo una duda funciona en todos los OS (Android, IOS etc...) y en todas sus versiones.

andres

19/9/2013
cambio de orientacion
funciona bien pero cuando tu haces el cambio de Portrait a Landscape el tamaño no se adapta al ancho, tienes que refrescar para poder que se ajuste.

como puedo resolver este problema ?