Unidades Relativas en CSS

Las unidades relativas en CSS permiten que los tamaños y posiciones de los elementos se adapten de manera flexible a diferentes condiciones, como el tamaño del texto o la vista del navegador. A diferencia de las unidades absolutas (como píxeles), las unidades relativas ofrecen más control y adaptabilidad.

1. Unidades `em`

Definición: La unidad em es relativa al tamaño de la fuente del elemento padre. Si el tamaño de fuente del elemento padre es de 16 píxeles, 1em equivale a 16 píxeles.
Uso Típico:

Tamaño de fuente: Ajusta el tamaño del texto en relación con el tamaño de fuente del elemento padre.

.texto {
    font-size: 1.5em; /* 1.5 veces el tamaño de fuente del elemento padre */
}

Espaciado: Se utiliza para márgenes y rellenos relativos al tamaño de fuente.

.contenido {
    margin: 2em; /* 2 veces el tamaño de fuente del elemento padre */
}

2. Unidades `rem`

Definición: La unidad rem es relativa al tamaño de fuente del elemento raíz (<html>). Es útil para mantener una escala uniforme en todo el documento, ya que siempre se basa en un tamaño de fuente consistente.
Uso Típico:

Tamaño de fuente: Se usa para definir tamaños de fuente en todo el documento basándose en el tamaño de fuente del elemento raíz.

html {
    font-size: 16px; /* Base para rem */
}

.texto {
    font-size: 1.25rem; /* 1.25 veces el tamaño de fuente del elemento raíz (20px) */
}

Espaciado: Utilizado para márgenes y rellenos basados en el tamaño de fuente raíz.

.contenido {
    padding: 2rem; /* 2 veces el tamaño de fuente del elemento raíz */
}

3. Unidades `vw` (Viewport Width)

Definición: La unidad vw es relativa al ancho del viewport (ventana de visualización). 1vw equivale al 1% del ancho del viewport.
Uso Típico:

Tamaño de elementos: Utilizado para ajustar elementos de manera flexible en relación con el ancho de la ventana.

.ancho-completo {
    width: 50vw; /* 50% del ancho del viewport */
}

Espaciado y fuentes: Puede ser usado para márgenes, padding y tamaños de fuente.

.titulo {
    font-size: 5vw; /* 5% del ancho del viewport */
}

4. Unidades `vh` (Viewport Height)

Definición: La unidad vh es relativa a la altura del viewport. 1vh equivale al 1% de la altura del viewport.
Uso Típico:

Altura de elementos: Se usa para definir la altura de los elementos en relación con la altura de la ventana.

.altura-completa {
    height: 100vh; /* 100% de la altura del viewport */
}

Espaciado y fuentes: Se puede utilizar para definir márgenes, rellenos y tamaños de fuente.

.subtitulo {
    font-size: 3vh; /* 3% de la altura del viewport */
}

5. Comparación y Uso Combinado

em: Útil para ajustar tamaños y espaciados relativos al contexto de tamaño de fuente del elemento padre, ideal para diseño modular.
rem: Proporciona consistencia en todo el documento basada en el tamaño de fuente raíz, útil para mantener escalas uniformes.
vw: Ideal para ajustar tamaños de elementos y fuentes en relación con el ancho del viewport, útil en diseños fluidos.
vh: Perfecto para ajustar tamaños y espaciados en relación con la altura del viewport, útil para diseños de altura completa.

Ejemplo Completo

Aquí tienes un ejemplo que muestra cómo usar estas unidades para un diseño adaptable:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unidades Relativas en CSS</title>
    <style>
        html {
            font-size: 16px; /* Tamaño de fuente raíz */
        }
        
        .container {
            width: 80vw; /* 80% del ancho del viewport */
            height: 50vh; /* 50% de la altura del viewport */
            background-color: lightcoral;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .text {
            font-size: 2rem; /* 2 veces el tamaño de fuente raíz */
            margin: 1em; /* 1 vez el tamaño de fuente del elemento padre */
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="text">Texto Adaptable</p>
    </div>
</body>
</html>

Unidades Relativas en CSS

1. Unidades em

2. Unidades rem

3. Unidades vw (Viewport Width)

4. Unidades vh (Viewport Height)