Unidades de medida en CSS

Unidades de medida en CSS por Ana Victoria Galán.

En CSS, las unidades de medida se utilizan para definir el tamaño de elementos, márgenes, espaciados, fuentes y otros aspectos del diseño web. Existen varias unidades, que se agrupan en dos tipos principales: unidades relativas y unidades absolutas.

Unidades relativas

Estas unidades dependen de un valor de referencia, lo que significa que su tamaño puede cambiar según el contexto (por ejemplo, el tamaño de la ventana del navegador o el tamaño de la fuente base).

• em: Relativa al tamaño de fuente del elemento. Si el tamaño de la fuente del elemento es 16px, 1em será igual a 16px.
• rem: Relativa al tamaño de la fuente raíz (generalmente el font-size del html). Si el font-size del html es 16px, 1rem será igual a 16px, independientemente de las fuentes de los elementos secundarios.
• %: Relativa al tamaño del contenedor o del elemento principal. Por ejemplo, si un contenedor tiene un ancho del 50%, su ancho será la mitad del contenedor padre.
• vw (viewport width): Relativa al ancho de la ventana del navegador. 1vw es el 1% del ancho de la ventana.
• vh (viewport height): Relativa a la altura de la ventana del navegador. 1vh es el 1% de la altura de la ventana.

Unidades absolutas

Estas unidades son fijas y no dependen del contexto o el tamaño del viewport, por lo que su valor no cambiará.

• px (píxeles): La unidad más común y precisa, utilizada para definir tamaños de elementos en píxeles.
• pt (puntos): 1 punto equivale a 1/72 de pulgada. Se usa más en impresión, pero también se puede aplicar en web.
• in (pulgadas): 1 pulgada equivale a 2.54 cm. Se usa más en contextos de impresión.
• cm (centímetros): Similar a las pulgadas, esta unidad se usa más para medios físicos como impresoras.
• mm (milímetros): Al igual que los centímetros, esta unidad es más usada para impresión.

¿Cuándo usar cada una?

• Relativas (em, rem, %, vw, vh) son ideales para diseños adaptativos y responsivos, ya que permiten que el contenido se ajuste según el tamaño de la pantalla o del contenedor.
• Absolutas (px, pt, in, cm, mm) son más útiles cuando se necesita un control preciso del diseño, pero no son tan flexibles para pantallas de diferentes tamaños.