Introducción a las Unidades en CSS

En este video se explica el uso de diferentes unidades en CSS, tales como píxeles, rems, ems, y su importancia al momento de diseñar sitios web adaptables. También se muestra la diferencia entre las unidades absolutas y relativas, y cómo elegir la unidad adecuada para diversos dispositivos.

Tipos de Unidades en CSS

1. Unidades Absolutas: Son aquellas que tienen un valor fijo sin depender de otros elementos. Ejemplos comunes incluyen:

• Píxeles (px): La unidad más común en pantallas. Un píxel es un punto en la pantalla.
• Centímetros (cm): Aunque rara vez se usa en diseño web, es una unidad que representa una medida física real.

1. Unidades Relativas: Estas unidades se basan en otro valor, lo que las hace más flexibles y adecuadas para diseño responsivo. Ejemplos incluyen:

• Porcentajes (%): Se calculan en función de un valor base, generalmente el elemento padre.
• Ems (em): Basado en el tamaño de la fuente del elemento padre. Si un párrafo tiene un font-size de 2em, su tamaño será dos veces el de su elemento padre.
• Rems (rem): Similar a los ems, pero se basan en el tamaño de fuente raíz (generalmente 16 píxeles por defecto).
• Viewport Width (vw): Basado en el ancho de la ventana del navegador. 1vw es igual al 1% del ancho del viewport.

Ejemplos Prácticos

Unidades Absolutas con Píxeles

font-size: 40px; /* El texto tendrá un tamaño fijo de 40 píxeles */

Este valor de 40 píxeles será el mismo en todas las pantallas, pero puede no ser adaptable a diferentes dispositivos (móviles, tablets, etc.).

Uso de Unidades Relativas

Con Ems:

.header {
  font-size: 2em; /* El texto será 2 veces más grande que el tamaño de la fuente del elemento padre */
}

Los ems pueden ser confusos porque se basan en el tamaño del elemento padre, lo que puede resultar en cambios inesperados en el diseño si no se controla bien.

Con Rems:

html {
  font-size: 62.5%; /* Establecer el tamaño base a 10px */
}
.header {
  font-size: 3rem; /* El texto será 3 veces el tamaño base de la fuente del HTML */
}

En este ejemplo, se usa el «hack» de 62.5% para que 1rem equivalga a 10 píxeles, facilitando la conversión entre píxeles y rems para diseños más adaptables.

Comparación Entre Ems y Rems

Los ems se basan en el tamaño del elemento padre, lo que puede causar problemas si hay varios niveles de anidación de elementos con diferentes tamaños de fuente. Los rems siempre se basan en el tamaño de la raíz, lo que los hace más predecibles y fáciles de manejar.

Ejemplo de Ems confuso:

.container {
  font-size: 2em; /* 2 veces el tamaño de la fuente del padre */
}
.header {
  font-size: 1em; /* Igual al padre, pero debido a que el padre es 2em, este será 2 veces más grande de lo esperado */
}

Ejemplo de Rems más controlado:

html {
  font-size: 16px; /* Tamaño base */
}
.container {
  font-size: 2rem; /* Siempre 32px, sin importar el tamaño del padre */
}

Viewport Width (vw)

El uso de vw permite que el tamaño de los elementos se adapte al ancho de la ventana del navegador.

font-size: 10vw; /* El tamaño del texto será el 10% del ancho de la ventana del navegador */

Sin embargo, este enfoque no siempre es estable, ya que algunos dispositivos pueden interpretar el vw de manera diferente, y no es adecuado para todos los tipos de fuente.

Consideraciones Finales

• Píxeles son útiles cuando el diseño debe ser exacto, pero no se adaptan bien a pantallas con diferentes densidades.
• Rems son la opción preferida para diseños responsivos porque son fáciles de manejar y escalables.
• Ems pueden ser útiles, pero complicados si hay demasiadas dependencias en los elementos padre.
• Viewport Width ofrece flexibilidad, pero no es estable en todos los dispositivos.

Recomendación

Para sitios web adaptables, es recomendable usar rems en lugar de píxeles o ems, ya que se ajustan mejor a diferentes resoluciones y densidades de píxeles.