Curso Completo de CSS de principiante a avanzado - CURSO de CSS - 24 ¿Que son las UNIDADES de MEDIDA RELATIVAS en CSS? (REM y EM)

Puntos Clave de la Lección

• Introducción a las unidades REM: Estas unidades toman como referencia el tamaño de fuente definido en la raíz del documento (el elemento :root o la etiqueta html), lo que permite mantener una consistencia global en el diseño. [01:04]
• Comportamiento de REM respecto al navegador: Se explica cómo, si no se define explícitamente un tamaño en la raíz, el navegador utiliza sus valores predeterminados (típicamente 16px), los cuales pueden variar según la configuración del usuario. [02:13]
• Unidades EM y su efecto cascada: A diferencia de REM, la unidad EM es relativa al tamaño de fuente del elemento padre más cercano. Se detalla cómo esto genera un efecto de cascada donde el tamaño se multiplica según la jerarquía de los elementos. [08:32]
• Cálculos complejos con EM: Se ilustra mediante ejemplos prácticos cómo la anidación de elementos afecta el cálculo final de los valores en EM al depender del valor heredado de sus ancestros directos. [10:14]
• Uso de Porcentajes en CSS: Los porcentajes permiten definir tamaños relativos al contenedor padre, siendo fundamentales para propiedades como ancho (width) y alto (height), siempre que el padre tenga una dimensión definida. [14:26]

Productos útiles para este curso

Para seguir esta clase, se recomienda el uso de un editor de código como Visual Studio Code y un navegador web con herramientas de desarrollo (DevTools) activas para inspeccionar los valores calculados de cada elemento.

Resumen Final

El uso correcto de unidades relativas es esencial para cualquier desarrollador frontend. Mientras que REM ofrece una base sólida y predecible al referenciarse a la raíz, EM es ideal para componentes que deben ajustarse proporcionalmente a su contenedor inmediato. Por su parte, los porcentajes son la herramienta clave para construir estructuras fluidas que respondan al espacio disponible en el viewport. Dominar estas unidades permite reducir la dependencia de valores estáticos y mejora significativamente la adaptabilidad de los sitios web.

Créditos del Autor

Esta lección ha sido adaptada del contenido original creado por el canal de programación y desarrollo web, especializado en la enseñanza técnica de tecnologías como CSS, HTML y diseño de interfaces. Se recomienda visitar su canal oficial de YouTube para profundizar en estos contenidos.