¿Por qué em y vw son unidades mágicas?

em  y  vw se pueden utilizar en cualquier propiedad CSS que necesitemos hacer responsive. En particular, deberíamos emplearlas para definir todos los elementos /estilos/ que queramos hacer adaptables como margin y padding, y también nos resultarán de gran utilidad en la proporcionalidad height y width de imágenes background y cajas contenedoras con estilo.

A continuación conoceremos bien las unidades y cómo aplicarlas correctamente:

font-size: 12px ¡ Basta ya de píxeles! ¡Seamos responsive!

Empecemos con unidades de medida responsive para font-size, margin, padding, etc

Las unidades de medida en píxeles (px) si bien son un buen punto de partida para trabajar en CSS, resultan poco recomendables en el entorno responsive (adaptación a diferentes medidas de pantalla y dispositivos).

Para trabajar en el entorno responsive necesitamos emplear proporciones escalables o adaptativas  ( % y em) e idealmente aplicar también las nuevas proporciones CSS3 para viewport (vh y vw) , que escalan el elemento según las propiedades de la pantalla de visualización.

Conozcamos al detalle todas las propiedades de escala CSS para elementos, las proporciones fijas, las proporciones escalables y las proporciones relativas a la medida de la pantalla (viewport) y cómo aplicarlas en nuestro css.

1. Las proporciones fijas

Píxeles (px):  Los píxeles son unidades de tamaño fijo que se utilizan en medios de pantalla (es decir, para leer en la pantalla de la computadora). Un píxel es igual a un punto en la pantalla de la computadora (la división más pequeña de la resolución de su pantalla). Muchos diseñadores web utilizan unidades de píxeles en documentos web para producir una representación de su sitio con un píxel perfecto tal como se representa en el navegador. Un problema con la unidad de píxeles es que no se puede escalar hacia arriba para los lectores con discapacidad visual o hacia abajo para adaptarse a dispositivos móviles.

Puntos (pt): Los puntos se usan tradicionalmente en medios impresos (cualquier cosa que se imprima en papel, etc.). Un punto es igual a 1/72 de pulgada. Los puntos son muy parecidos a los píxeles, ya que son unidades de tamaño fijo y no pueden escalar en tamaño.

2. Las proporciones escalables o adaptativas

Porcentaje (%) : La unidad porcentual es muy parecida a la unidad «em», salvo por algunas diferencias fundamentales. En primer lugar, el tamaño de fuente actual es igual al 100% (es decir, 10 puntos = 100%). Mientras usa la unidad de porcentaje, su texto permanece completamente escalable para dispositivos móviles y para accesibilidad.

«Ems» (em): «em» es una unidad escalable que se utiliza en los medios de documentos web. Un em es igual al tamaño de fuente actual, por ejemplo, si el tamaño de fuente del documento es 16px, 1em es igual a 16px. Los ems son de naturaleza escalable, por lo que .2em sería igual a 32px. La unidad em siempre depende de su elemento padre. Por ejemplo, si el elemento body tiene un tamaño de fuente de 16px y un elemento hijo tiene una fuente con tamaño 1.3em, este texto se mostrará de un tamaño un 30% más grande que el del body (20.8px).

Algo muy importante respecto a la medida em es que  siempre nos proporciona valores relativos al font-size del elemento,  Por lo que deberíamos aplicar  em  en propiedades que necesiten mantener la proporcionalidad respecto al font-size de un estilo concreto.

En otras palabras, debemos tener siempre en cuenta que las propiedades definidas en em cambian con el font-size del elemento que estamos tratando.

Rem (rem) : La unidad de medida rem es muy similar a em (que acabamos de ver) , con la única diferencia de que rem   *no es escalable, esto quiere decir que no depende de la medida del elemento padre, sino del elemento raíz del documento, el elemento HTML. Rem es un em basado en la raíz.

Esto implica que si el elemento HTML tiene un tamaño de fuente de 16px (como es por defecto), entonces 1rem, sería igual a 16px, y si queremos aplicar un tamaño basado en rem a cualquier elemento de la página, no importará cual sea el tamaño de fuente que tenga asociado ese elemento, ya que 1 rem siempre será igual a 16 pixeles a no ser que se modifique el elemento raíz.

De ahí que cada vez haya más y más ejemplos de uso de  em  +  rem  a la vez, incluso dentro de la misma propiedad:

1. Aplica  em para propiedades que cambian con el font-size del elemento

2. Aplica  rem para todo lo demás

Prueba a testear online con un ejemplo de aplicación práctica de las unidades em y rem

3. Proporciones relativas a la medida de la pantalla (viewport)

Viewport units (vh y vw) : vh y vw  son unidades de longitud relativas a la pantalla de visualización (también llamada pantalla gráfica o viewport).

Con esta nueva integración de CSS3, puedes crear tamaños de fuente font-size (también padding, margin, y proporciones para elementos como imágenes)  que se ajusten al ancho o alto de las pantallas de visualización. 1vh (1V Height ) hace referencia a la centésima parte de la altura de la ventana y 1vw  (1V Width ) a la centésima parte del ancho de la ventana.

Por tanto:

100vh =  100% altura de la pantalla

100vw  = 100% anchura de la  pantalla

En resumen, el valor vw indica la proporcionalidad de un estilo escalable como font-size o cualquier otro valor como  padding o height con respecto a la pantalla donde se va a visualizar.

Estas medidas son muy útiles para:

•  Generar textos enormes en pantallas gigantes y textos pequeños en pantallas pequeñas.
•  Establecer la medida de una imagen de fondo, marco contenedor o una caja con texto.

Podemos testear estas medidas proporcionales y su aplicaciones en estos dos ejemplos de Codepen:

Ejemplo1 para textos:

[codepen_embed height=»265″ theme_id=»0″ slug_hash=»rkhgo» default_tab=»css,result» user=»timseverien»]See the Pen <a href=’https://codepen.io/timseverien/pen/rkhgo/’>Viewport units</a> by Tim Severien (<a href=’https://codepen.io/timseverien’>@timseverien</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Ejemplo 2 para imágenes:

[codepen_embed height=»265″ theme_id=»0″ slug_hash=»mezEyG» default_tab=»html,result» user=»edwinpgm»]See the Pen <a href=’https://codepen.io/edwinpgm/pen/mezEyG/’>Background Size Cover CSS</a> by Edwin Gonzales Melquiades (<a href=’https://codepen.io/edwinpgm’>@edwinpgm</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

4. Proporciones relativas a otra proporción

Existen otras dos unidades de medida no mencionadas: vmin y vmax que están vinculadas al máximo y mínimo de anchos y altos, dependiendo de cuál es más pequeño y más grande. Estas medidas resultan especialmente útiles para generar cajas de texto cuadradas tipo:

Que abarcaría todo el alto sin atender al ancho de la pantalla (desbordaría en el ancho -fuera de pantalla- si fuera necesario)

*He dejado fuera una explicación mayor porque su uso es más residual y sólo para casos muy específicos.

Conclusiones y ejemplo práctico

Comprendiendo todo lo anterior veremos que generando un estilo-x con los siguientes atributos:

.estilo-x {
font-size: calc(1em + 1vw);
line-height: 1em;
padding: 1em;
margin: 1em;}


• Si sustituimos el valor [1] por la proporción deseada (por ejemplo 0.8em para una medida menor;  o 1.5em para una medida mayor) podremos generar un estilo responsive de texto absolutamente controlado en versiones responsive.
• Si deseamos escalar la medida según el ancho del dispositivo de visualización sustituiremos el valor [1] de vw  por un número mayor o menor, por ejemplo 0.5vw o 1.8vw.
• También podremos sustituir el valor vw por [vh], si la referencia es el alto del dispositivo de visualización.
• Sustituiremos em por rem en aquellas variables a las que no deseemos aplicar la proporcionalidad em del font-size.

Con esto ya tenemos TODO el conocimiento necesario para crear estilos responsive sin límites y con sus variables totalmente controladas.

Si te ha gustado el artículo comenta o comparte. ¡Gracias! 🙂