Al diseñar elementos en CSS, tienes dos categorías de unidades para elegir: unidades absolutas y unidades relativas. Aquí hay un desglose de cada uno de ellos y en qué se diferencian:

1. Unidades absolutas

Las unidades absolutas son unidades de medida fijas. No se ven afectados por otros elementos ni por el tamaño de la pantalla, por lo que su tamaño es constante independientemente del contexto en el que se utilicen.

Unidades absolutas comunes:

• px (píxeles): Un píxel es un pequeño cuadrado en la pantalla. Es la unidad más utilizada para diseños fijos.

  • Ejemplo:

  h1 {
    font-size: 24px;
  }
  

• pt (puntos): normalmente se utiliza en medios impresos, 1 punto equivale a 1/72 de pulgada.

• cm (centímetros) y in (pulgadas): Estas unidades, que rara vez se utilizan en diseño web, se basan en dimensiones físicas.

Ventajas de las unidades absolutas:

• Consistencia: El tamaño siempre será el mismo, sin importar el dispositivo o el tamaño de la pantalla.
• Predecible: ideal para crear diseños fijos en los que desea que el diseño se vea exactamente igual en todas las plataformas.

Desventajas:

• Falta de flexibilidad: las unidades absolutas no se adaptan bien a diferentes tamaños de pantalla o configuraciones de zoom, lo que las hace menos receptivas.

2. Unidades relativas

Las unidades relativas son flexibles y se escalan según el contexto en el que se utilizan. Su tamaño depende de otros elementos, como el contenedor principal, la ventana gráfica o el tamaño de fuente base.

Unidades relativas comunes:

• em: Relativo al tamaño de fuente del elemento en el que se utiliza. Si el elemento principal tiene un tamaño de fuente de 16 px, 1 em equivale a 16 px. Si el tamaño del elemento principal cambia, también cambiará el tamaño en em.

  • Ejemplo:

  p {
    font-size: 1.5em; /* 1.5 times the font size of the parent */
  }
  

• rem (root em): Relativo al tamaño de fuente del elemento raíz (normalmente el elemento ). Esto lo hace más predecible en comparación con ellos.

De forma predeterminada, los navegadores suelen establecer el tamaño de fuente raíz en 16 px, a menos que se especifique lo contrario. Si define un tamaño de fuente personalizado para el elemento, todos los valores rem se calcularán en función de ese nuevo tamaño.

• Ejemplo:
  

  p {
    font-size: 2rem; /* 2 times the root font size */
  }
  

  • % (porcentaje): Relativo al tamaño del elemento principal. Por ejemplo, ancho: 50% hace que el elemento tenga el 50% del ancho de su contenedor principal.

• Ejemplo:
  

  div {
    width: 75%; /* 75% of the parent's width */
  }
  

  • vw (ancho de la ventana gráfica) y vh (alto de la ventana gráfica): Estas unidades son relativas a la ventana gráfica del navegador. 1vw es el 1% del ancho de la ventana gráfica y 1vh es el 1% de la altura de la ventana gráfica.

• Ejemplo:
  

  div {
    width: 50vw; /* 50% of the viewport's width */
  }
  

Ventajas de las unidades relativas:

• Diseño responsivo: las unidades relativas se escalan automáticamente según el tamaño de la pantalla, el tamaño de la fuente o las dimensiones del contenedor, lo que hace que su diseño sea más flexible.
• Más fácil de mantener: cambiar el tamaño de fuente del elemento raíz (usando rem) puede escalar todo tu diseño.

Desventajas:

• Puede ser más difícil de controlar: Sin una buena comprensión de la herencia y de cómo los tamaños se distribuyen en cascada a través de los elementos, las unidades relativas a veces pueden producir resultados inesperados.

Cuándo utilizar unidades absolutas frente a relativas

• Las unidades absolutas (como px) son mejores cuando necesitas medidas precisas y fijas. Úsalos cuando quieras que algo tenga el mismo tamaño en todas partes (por ejemplo, un logotipo o ícono pequeño).
• Las unidades relativas (como em, rem, vw y %) son ideales para el diseño responsivo. Permiten que los elementos escale y se adapten según el tamaño de la pantalla o el elemento principal, lo que hace que su diseño sea más flexible.

Ejemplo: Unidades absolutas versus relativas en la práctica

This is 24px text
This is 1.5rem text (24px based on root size)

En este ejemplo:

• El tamaño de fuente absoluto (24px) siempre será el mismo.
• El tamaño de fuente relativo (1,5rem) se ajustará según el tamaño de fuente raíz (16px), lo que dará como resultado 24px.

Conclusión:

• Utilice unidades absolutas cuando sea necesaria la coherencia entre dispositivos, pero tenga en cuenta que no responden.
• Utilice unidades relativas para diseños más flexibles y responsivos, especialmente al desarrollar para múltiples tamaños de pantalla y dispositivos.