Unidades de Medida

Tipos de Medidas - Relativas y Absolutas

Las medidas absolutas y relativas se indican con un valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en blanco entre el número y la unidad de medida). Si el valor es 0, la unidad de medida es opcional.

Unidades Relativas

Px (Píxeles)

Relativa respecto a pantalla del dispositivo que visualiza el usuario. Valor numérico seguido de px.

Porcentaje (%)

Siempre está referenciado a otra medida, la de la caja padre (ancho). Valor numérico seguido del símbolo %.

Em

Relativa respecto del tamaño de letra empleado. Un em es básicamente el tamaño de una letra “M” del elemento al cual se esté aplicando esta medida.

• La unidad em es escalable y siempre depende de su elemento padre.
• Por defecto, el tamaño de tipografía del navegador es 16 px.
• Si partimos de que 1 em corresponde a 16 px, lograremos trabajando con em que los tamaños sean relativos a la tipografía seteada en el navegador.
• El valor de la unidad se actualiza por herencia, tomando como referencia el padre de cada caja para establecer la nueva medida real.

Ejemplo 1 - navegador a tamaño medio:

• body → 1em (16px)
• hijo → .8em (16px x .8 = 12.8px)
• nieto → .8em (12.8px x .8 = 10.24px)

Ejemplo 2 - navegador a tamaño grande:

• body → 1em (20px)
• hijo → .8em (20px x .8 = 16px)
• nieto → .8em (16px x .8 = 12.8px)

Rem

Relativa respecto del tamaño de letra empleado (root). El valor de la unidad se actualiza por herencia a partir del valor declarado en el html. Siempre depende de la raíz. No se hereda ni cambia su valor absoluto.

• Es muy similar a em, con la única diferencia de que no es escalable.
• No depende del elemento padre, sino del elemento raíz del documento, el elemento HTML.
• Rem significa “Root Em”, o sea, es un em basado en la raíz.
• Si el elemento HTML tiene un tamaño de fuente de 16px (como es por defecto), entonces 1rem sería igual a 16px siempre a no ser que se modifique el elemento raíz.

Medidas de Viewport

Las medidas vh y vw son medidas relativas de acuerdo al viewport (el tamaño de la ventana del navegador).

• 1vh = 1% de la altura del viewport
• 100vh = altura del viewport
• 1vw = 1% del ancho del viewport
• 100vw = ancho del viewport

Unidades Absolutas

Las unidades absolutas definen las medidas de forma completa, ya que sus valores reales no se calculan a partir de otro valor de referencia, sino que son directamente los valores indicados.

• in (pulgadas)
• cm (centímetros)
• mm (milímetros)
• pt (puntos)
• pc (picas)