GUÍA COMPLETA PARA USAR UNIDADES CSS EM, REM, VW Y VH

November 8, 2025

Introducción a las Unidades CSS Relativas

Las unidades CSS relativas, como EM, REM, VW y VH, son herramientas esenciales para desarrollar sitios web responsivos y escalables. Estas unidades permiten que los elementos de una página se adapten dinámicamente al tamaño de la ventana del navegador o a las configuraciones de los elementos padres, lo que facilita la creación de diseños que funcionan en diferentes dispositivos. En este tutorial, exploraremos cada una de estas unidades, sus aplicaciones prácticas y cómo combinarlas con media queries para lograr interfaces fluidas y adaptables. A través de ejemplos de código, aprenderás a implementar estas unidades de manera efectiva para mejorar la experiencia del usuario en pantallas de distintos tamaños.

¿Por Qué Usar Unidades Relativas?

Las unidades relativas son fundamentales para el diseño web moderno, ya que permiten que los elementos se ajusten automáticamente al contexto del usuario. A diferencia de las unidades absolutas, como los píxeles (px), que mantienen un tamaño fijo, las unidades relativas como REM y EM se basan en el tamaño de fuente del elemento raíz o padre, mientras que VW y VH dependen del tamaño de la ventana gráfica. Esta flexibilidad es clave para crear sitios web responsivos que se vean bien en dispositivos móviles, tabletas y escritorios sin necesidad de ajustes manuales exhaustivos.

Por ejemplo, si usas píxeles para definir el tamaño de fuente de un texto, este permanecerá estático sin importar el tamaño de la pantalla, lo que puede romper el diseño en dispositivos más pequeños. En cambio, usar REM o VW permite que el texto se escale proporcionalmente, mejorando la legibilidad y la estética. A continuación, veremos cada unidad en detalle y cómo aplicarlas en proyectos reales.

Configuración del Proyecto

Antes de comenzar, necesitas configurar un entorno de desarrollo básico para experimentar con las unidades CSS. Crea una estructura de archivos para tu proyecto con los siguientes pasos:

Crea una carpeta llamada proyecto-unidades-css.
Dentro de la carpeta, crea tres archivos: index.html, styles.css y script.js.
Vincula los archivos CSS y JavaScript al HTML.
Instala una extensión de servidor en vivo en tu editor de código (como Live Server en VS Code) para visualizar los cambios en tiempo real.

Aquí está un ejemplo de la estructura básica del proyecto:

proyecto-unidades-css/
├── index.html
├── styles.css
└── script.js

Y un ejemplo de código para index.html:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Unidades CSS Relativas</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="text">Texto de ejemplo</div>
        <div class="box"></div>
        <script src="script.js"></script>
    </body>
</html>

Este código establece una base simple para probar las unidades CSS. Asegúrate de que el servidor en vivo esté activo para ver los cambios mientras modificas el CSS.

Unidades REM: Definición y Uso

La unidad REM (Root EM) se basa en el tamaño de fuente del elemento raíz, que es el elemento <html>. Por defecto, los navegadores establecen el tamaño de fuente del elemento raíz en 16 píxeles. Esto significa que 1 REM equivale a 16px a menos que se modifique el tamaño de fuente del elemento <html>.

Por ejemplo, si defines un tamaño de fuente de 1 REM para un elemento, este tendrá un tamaño de 16px. Si cambias el tamaño de fuente del elemento raíz a 20px, entonces 1 REM equivaldrá a 20px. Esto convierte a REM en una unidad ideal para mantener consistencia en los tamaños a lo largo de un sitio web.

Veamos un ejemplo práctico:

html {
    font-size: 16px;
}

.text {
    font-size: 1rem; /* 1rem * 16px = 16px */
}

En este caso, el elemento con la clase .text tendrá un tamaño de fuente de 16px. Ahora, si aumentamos el tamaño de fuente a 2 REM:

html {
    font-size: 16px;
}

.text {
    font-size: 2rem; /* 2rem * 16px = 32px */
}

El resultado será un texto de 32px. Si cambiamos el tamaño de fuente del elemento raíz a 40px:

html {
    font-size: 40px;
}

.text {
    font-size: 1rem; /* 1rem * 40px = 40px */
}

El texto ahora tendrá un tamaño de 40px. Este comportamiento permite ajustar todos los elementos que usan REM simplemente modificando el tamaño de fuente del elemento raíz.

Hacer Sitios Responsivos con REM

Para crear sitios web responsivos con REM, combina estas unidades con media queries para ajustar el tamaño de fuente del elemento raíz en diferentes tamaños de pantalla. Esto asegura que los elementos se escalen proporcionalmente según el dispositivo.

Por ejemplo, define un tamaño de fuente base y ajústalo en diferentes puntos de quiebre (breakpoints):

html {
    font-size: 16px; /* Valor por defecto */
}

.text {
    font-size: 3rem; /* 3rem * 16px = 48px */
}

/* Pantallas grandes (hasta 1400px) */
@media (max-width: 1400px) {
    html {
        font-size: 25px; /* 3rem * 25px = 75px */
    }
}

/* Tabletas (hasta 768px) */
@media (max-width: 768px) {
    html {
        font-size: 18px; /* 3rem * 18px = 54px */
    }
}

/* Móviles (hasta 450px) */
@media (max-width: 450px) {
    html {
        font-size: 12px; /* 3rem * 12px = 36px */
    }
}

En este ejemplo, el tamaño del texto con la clase .text se ajusta automáticamente según el tamaño de la pantalla:

Pantallas grandes: 75px.
Tabletas: 54px.
Móviles: 36px.
Por defecto: 48px.

Este enfoque simplifica el diseño responsivo, ya que solo necesitas ajustar el tamaño de fuente del elemento raíz en lugar de modificar cada elemento individualmente.

Unidades EM: Definición y Uso

La unidad EM es similar a REM, pero en lugar de depender del elemento raíz, se basa en el tamaño de fuente del elemento padre más cercano. Esto puede ser útil para elementos que necesitan escalar en relación con su contenedor, pero también puede complicar los cálculos si no se maneja con cuidado.

Por ejemplo:

html {
    font-size: 16px;
}

.text {
    font-size: 3em; /* 3em * 16px = 48px */
}

En este caso, si el elemento padre (en este caso, el <html>) tiene un tamaño de fuente de 16px, el texto tendrá un tamaño de 48px. Sin embargo, si aplicamos una propiedad como padding en EM, los cálculos pueden volverse más complejos:

html {
    font-size: 16px;
}

.text {
    font-size: 3em; /* 3em * 16px = 48px */
    padding: 3em; /* 3em * 48px = 144px */
}

Aquí, el padding se calcula en función del tamaño de fuente del elemento .text (48px), no del elemento raíz, lo que resulta en un valor de 144px. Este comportamiento de acumulación puede llevar a errores de cálculo, especialmente en diseños complejos.

Por esta razón, el uso de EM no es recomendado para proyectos grandes, ya que:

Es propenso a errores de cálculo.
Requiere más código en media queries para mantener la responsividad.
Consume más tiempo en ajustes y pruebas.

Unidades VW: Ancho de la Ventana Gráfica

La unidad VW (Viewport Width) representa un porcentaje del ancho de la ventana gráfica. Por ejemplo, 1 VW equivale al 1% del ancho total de la pantalla. Esto es útil para elementos que deben escalar según el tamaño de la ventana del navegador, como contenedores o imágenes.

Veamos un ejemplo:

.box {
    width: 50vw; /* 50% del ancho de la ventana */
    height: 300px;
    background-color: lightblue;
}

Si la ventana gráfica tiene un ancho de 1920px, el elemento con la clase .box tendrá un ancho de 960px (50% de 1920px). Si el usuario redimensiona la ventana, el ancho del elemento se ajustará automáticamente.

Para visualizar el ancho dinámicamente, puedes usar JavaScript para mostrar el valor:

const box = document.querySelector(".box");
const boxWidth = box.offsetWidth;
box.innerHTML = `Ancho: ${boxWidth}px`;

Este código muestra el ancho del elemento .box en píxeles, actualizándose al redimensionar la ventana. El resultado es un elemento que siempre ocupa el 50% del ancho de la pantalla, ideal para diseños fluidos.

Unidades VH: Alto de la Ventana Gráfica

La unidad VH (Viewport Height) funciona de manera similar a VW, pero se basa en el alto de la ventana gráfica. 1 VH equivale al 1% del alto total de la pantalla. Es ideal para elementos que necesitan ocupar una proporción del alto de la ventana, como secciones de página completa.

Por ejemplo:

.box {
    width: 300px;
    height: 50vh; /* 50% del alto de la ventana */
    background-color: lightgreen;
}

Si la ventana gráfica tiene un alto de 1080px, el elemento .box tendrá un alto de 540px (50% de 1080px). Puedes usar JavaScript para mostrar el alto dinámicamente:

const box = document.querySelector(".box");
const boxHeight = box.offsetHeight;
box.innerHTML = `Alto: ${boxHeight}px`;

Este código muestra el alto del elemento .box en píxeles, ajustándose al redimensionar la ventana. VH es especialmente útil para crear diseños de página completa o secciones que deben mantenerse proporcionales al alto de la pantalla.

Combinando Unidades para Diseños Avanzados

Para crear diseños más complejos, puedes combinar REM, VW y VH en un solo proyecto. Por ejemplo, podrías usar REM para los tamaños de fuente, VW para los anchos de contenedores y VH para las alturas de secciones. Aquí hay un ejemplo práctico:

html {
    font-size: 16px;
}

.container {
    width: 80vw; /* 80% del ancho de la ventana */
    min-height: 50vh; /* Mínimo 50% del alto de la ventana */
    padding: 2rem; /* 2rem * 16px = 32px */
}

.title {
    font-size: 2.5rem; /* 2.5rem * 16px = 40px */
}

@media (max-width: 768px) {
    html {
        font-size: 14px; /* Ajuste para pantallas más pequeñas */
    }
    .container {
        width: 90vw; /* Más ancho en pantallas pequeñas */
    }
}

Este código crea un contenedor que ocupa el 80% del ancho de la pantalla y al menos el 50% de su alto, con un título que se escala según el tamaño de fuente raíz. En pantallas más pequeñas, el tamaño de fuente raíz se reduce y el contenedor se expande para mejorar la usabilidad.

Mejores Prácticas para Unidades Relativas

Para maximizar la efectividad de las unidades relativas, sigue estas recomendaciones:

Usa REM para tamaños de fuente y espaciado en la mayoría de los casos, ya que es más predecible y fácil de escalar.
Evita EM para propiedades que no dependan directamente del elemento padre, para reducir la complejidad.
Utiliza VW y VH para elementos que necesiten adaptarse al tamaño de la ventana gráfica, como contenedores o secciones de página completa.
Combina las unidades con media queries para ajustar los tamaños en diferentes dispositivos.
Prueba tus diseños en múltiples dispositivos para garantizar una experiencia consistente.

Resolución de Problemas Comunes

Al trabajar con unidades relativas, puedes encontrarte con algunos problemas comunes:

Cálculos inesperados con EM: Si los tamaños se descontrolan, verifica el tamaño de fuente del elemento padre y considera usar REM en su lugar.
Desbordamiento en VW/VH: Si un elemento es demasiado grande, usa propiedades como max-width o max-height para limitarlo.
Tamaños de fuente inconsistentes: Asegúrate de definir un tamaño de fuente base en el elemento <html> para REM, y prueba con diferentes valores en media queries.

Por ejemplo, para evitar que un contenedor sea demasiado ancho:

.container {
    width: 90vw;
    max-width: 1200px; /* Limita el ancho máximo */
}

Conclusiones

Las unidades CSS EM, REM, VW y VH son herramientas poderosas para crear sitios web adaptables que se ajustan a diferentes tamaños de pantalla y dispositivos. REM es ideal para mantener consistencia en tamaños de fuente y espaciado, mientras que VW y VH son perfectos para elementos que dependen del tamaño de la ventana gráfica. Aunque EM puede ser útil en casos específicos, su uso debe ser limitado debido a su complejidad. Al combinar estas unidades con media queries y buenas prácticas de diseño, puedes construir interfaces modernas, fluidas y fáciles de mantener. Experimenta con los ejemplos de código proporcionados y adapta estas técnicas a tus proyectos para mejorar la experiencia del usuario en cualquier dispositivo.