Unidades relativas
Las unidades relativas son un tipo de unidades más potentes a las absolutas, y son ideales para trabajar en dispositivos con diferentes tamaños ya que nos van a ahorrar bastante trabajo.
Se pueden agrupar en dos categorías principales: las relativas a la fuente y las relativas al viewport o contenedor. Dentro del gurpo de las unidades relativas a las más conocidas son:
- em: Es relativa al font-size del elemento padre. Si un <div> tiene un font-size de 16px, entonces 2em dentro de ese div equivaldría a 32px. Es útil para crear componentes que escalan de manera uniforme. Por ejemplo, si aumentas el font-size del contenedor, todos los elementos internos definidos con em (márgenes, anchos, etc.) crecerán proporcionalmente.
- rem (root em): Es similar a em, pero siempre es relativa al font-size del elemento raíz (la etiqueta <html>). Esto evita el problema de anidamiento de los em (donde un em se calcula sobre otro em, complicando las cosas). rem es la unidad más recomendada hoy en día para definir tamaños de fuente y espaciados, ya que proporciona una escala consistente en todo el sitio y respeta las preferencias de tamaño de fuente del usuario en su navegador.
- % (Porcentaje): Es relativa a una propiedad del elemento padre. Por ejemplo, un width: 50% significa que el elemento ocupará la mitad del ancho de su contenedor directo. Es muy común para crear diseños de columnas o para tamaños que deben ajustarse al espacio disponible.
- ex y ch: Son menos comunes. ex se basa en la altura "x" de la fuente del elemento (la altura de la letra 'x' minúscula), y ch se basa en el ancho del carácter "0" de la fuente. ch puede ser útil para limitar el ancho de un párrafo a un número de caracteres por línea para mejorar la legibilidad.
Aquellas unidades que comienzan con r como rem, rex, etc. toman como referencia al elemento raíz del documento (:root)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Unidades Relativas a la Fuente</title>
<link rel="stylesheet" href="1.relativasFuente.css">
</head>
<body>
<main>
<h1>Demostración de Unidades Relativas a la Fuente</h1>
<article class="container rem-example">
<h2>Unidad <code>rem</code> (relativa a la raíz <code><html></code>)</h2>
<p>
El tamaño de fuente de este párrafo es <code>1.6rem</code>. Como la fuente de <code><html></code> es
de <code>10px</code>, este texto mide 16px. El título mide <code>2.4rem</code> (24px).
</p>
</article>
<article class="container em-example">
<h2>Unidad <code>em</code> (relativa al padre)</h2>
<p>
El contenedor padre tiene un <code>font-size</code> de <code>20px</code>. Este párrafo hereda ese tamaño. El
título, sin embargo, tiene <code>font-size: 1.5em</code>, lo que resulta en 1.5 * 20px = 30px.
</p>
<div class="child-box">
Esta caja hija tiene un <code>font-size</code> de <code>0.8em</code>, que se calcula sobre su padre
(.em-example), resultando en 0.8 * 20px = 16px. Su padding es de <code>1em</code>, lo que equivale a 1 *
16px = 16px (porque el padding se calcula sobre el font-size del PROPIO elemento).
</div>
</article>
<article class="container percentage-example">
<h2>Unidad <code>%</code> (Porcentaje)</h2>
<div class="parent-width">
Contenedor padre (ancho: 100%)
<div class="child-width">
Caja hija (ancho: 50% del padre)
</div>
</div>
</article>
<article class="container ch-example">
<h2>Unidad <code>ch</code> (relativa al ancho del carácter '0')</h2>
<p>
Este párrafo tiene un <code>max-width</code> de <code>60ch</code>. Esto significa que la línea no tendrá más
de 60 caracteres de ancho aproximadamente, lo cual es ideal para la legibilidad del texto largo, sin
importar el tamaño de la fuente. Prueba a cambiar el tamaño de la ventana y verás cómo se ajusta.
</p>
</article>
</main>
</body>
</html>- article rem: El texto y el título tienen un tamaño basado en los 10px definidos en la etiqueta <html>. Es consistente y predecible.
- article em: El contenedor padre tiene un font-size de 20px. Verás que el título (1.5em) es más grande (30px) y el texto de la caja hija (0.8em) es más pequeño (16px), todo calculado a partir de esos 20px. Esto demuestra cómo em depende de su contexto directo.
- Sección %: Verás una caja hija que ocupa exactamente la mitad del ancho de su caja padre, demostrando cómo el porcentaje se relaciona con las dimensiones del contenedor.
- Sección ch: Verás un párrafo que, aunque haya espacio de sobra, corta sus líneas a una longitud cómoda para la lectura, demostrando su utilidad en tipografía.