Uindades de medida en CSS. Medidas absolutas vs medidas relativas. Px,em,rem,vw,vh,%

Cuando tenemos que colocar elementos en una página web, las medidas son importantes, y conocer las opciones que nos da CSS (mencionaremos las más usadas). Existen medidas:

• absolutas: que no se adaptan a los dispositivos. Su tamaño no cambia y es siempre fijo. Por lo tanto son cómodas para empezar a diseñar, pero no siguen las tendencias actuales de ser variables para diferentes dispositivos. Tampoco son adecuadas para la accesibilidad (gente que necesita ver la pantalla en dimensiones más grandes por problemas de visión o similares).
• relativas: son unidades que dependen de algún otro factor, veremos cuáles. Si son adaptables a diferentes dispositivos.
  Dentro de estas unidades relativas cabe destacar las unidades viewport, que son las relativas a la ventana de visualización.

Vamos a entender cada una de ellas un poco más. En general se recomienda usar unidades relativas cuando sea posible.

Unidades absolutas.

Os mencionamos algunas de mayor a menor. Creemos que se explican por sí solas.

• in: pulgadas. – Equivalente a 25,4 mm.
• cm: centímetros – Equivalente a 10 mm.
• pc: picas – Equivalente a 4,23 mm.
• mm: milímetros
• pt: puntos – Equivalente a 0,35 mm.
• px: píxeles – Equivalente a 0,26 mm.

Unidades relativas.

• rem: Estas unidades son relativas a la fuente raíz de la web. 1rem = al tamaño de la fuente raíz (normalmente 16px y suele ser el del BODY). Es una buena unidad para webs adaptables porque permite relacionarlo todo a una misma cantidad. Y podemos escalar fácilmente toda la web.
• em: Es parecida a la anterior, pero es relativa al tamaño fuente del elemento en que esté (que si no está definido se hereda del superior, del padre). Es un tamaño que se ha usado mucho, pero puede llevar a confusiones porque las fuentes dependen de unos elementos que pueden depender de otros.
• %: Porcentaje. Relativo al elemento padre.
• ch: Relativo al ancho del cero “0”.

Por ejemplo, con una fuente raíz de 16px, 10 rem serán 160px.
Con em, si un div tiene 12px de fuente, algo dentro que tenga 10em equivaldrá a 120px.

Las unidades anteriores permiten crear un diseño de tamaños dependiendo de elementos como la fuente raíz. Y desde ahí poner elementos relativos a esta fuente, o relativos a cada contenedor. Esto permite que toda la página sea escalable, y no tener que hacer cambios a todos los elementos cuando se quiera variar el tamaño.
Las rem se usan cuando queremos escalabilidad global respecto a la raíz.
Las em se usan cuando queremos escalabilidad dentro de un elemento.

Unidades relativas viewport.

Dentro de las unidades relativas existen unas especiales que son relativas a la ventana de visualización (y por lo tanto pensadas para su uso en diferentes dispositivos). Las más importantes son las siguientes:

• vw: viewport width. – 1vw = 1% del ancho del navegador.
• vh: viewport height. – 1vh = 1% del alto del navegador.
• vmin: viewport minimum. – 1vmin = 1% del mínimo entre el ancho y el alto del navegador.
• vmax: viewport maximum. – 1vmax = 1% del máximo entre el ancho y el alto del navegador.

Estas unidades permiten poner como referencia el tamaño de la pantalla – algo importante en un mundo de dispositivos de tamaños cambiantes. Y desde ahí diseñar los elementos de la página.
Por ejemplo 50vw sería la mitad del ancho del navegador, o 100vw sería el 100% del mismo.

vw se usaría para elementos que se relacionen con la anchura del dispositivo (columnas por ejemplo).
vh se usaría para elementos que se relacionen con la altura del dispositivo.