Las unidades relativas en CSS (rem, em, vw, vh) son medidas de tamaño que se ajustan dinámicamente según el contexto del dispositivo o del usuario, a diferencia de los píxeles (px) que son estáticos. El uso de unidades relativas como `rem` mejora radicalmente la accesibilidad al respetar las preferencias de escalado de fuente del navegador.
1The Limitation of Pixels
Los píxeles (px) son unidades absolutas. Un píxel siempre medirá exactamente un píxel. Aunque ofrecen precisión, fallan en la web moderna porque no se adaptan al hardware del usuario ni respetan sus configuraciones de accesibilidad visual.
2The Big Four Relative Units
Para construir topologías fluidas, los ingenieros frontend utilizan las siguientes unidades relativas clave:
| Unidad | Relativo a | Caso de uso principal |
| :--- | :--- | :--- |
| rem | Elemento Raíz (html) | Tipografía global y accesibilidad |
| em | Elemento Padre | Escalado interno de componentes (ej. padding) |
| vw / vh | Hardware Viewport | Layouts de pantalla completa (Hero sections) |
| % | Contenedor Padre | Grillas internas, columnas y anchos flexibles |
### Profundizando en rem y em
El rem (Root EM) evalúa el tamaño de la fuente declarado en la etiqueta <html>. Si el navegador del usuario dice que 1rem = 16px, entonces 2rem = 32px.
El em evalúa el tamaño de la fuente de su ancestro más cercano. Es perfecto para crear un botón donde el padding escale automáticamente si decides hacer el texto del botón más grande.
