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.

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.