Unidades relativas

<< Unidades viewport ¿Qué unidad uso? >>

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. Las más conocidas son las siguientes: % (relativa a herencia, al elemento padre), em/rem (relativo al font-size en ese elemento o :root), ex/rex (relativo a la altura del carácter x minúscula, ch/rch (relativo al ancho del carácter 0), cap/rcap (relativo a la altura del primer carácter en mayúscula), lh/rlh (relativo al inline-height en ese elemento). Aquellas unidades que comienzan con r como rem, rex, etc. toman como referencia al elemento raíz del documento (:root)

Cuando utilizamos la unidad % debemos tener en cuenta que depende del padre, y por tanto si el padre tiene un tamaño de 200px el hijo va a tener la mitad si le damos un width del 50%, pero si el padre no tiene una propiedad width definida, el elemento hijo tendrá un valor de 0.

La unidad em tiene como referencia de medida el font-size del elemento actual. Por ejemplo, si tenemos puesta como tamaño de fuente 16px, 1em equivaldría a 16px, y 2em al doble 32px. Es importante que la propiedad font-size se hereda, y por tanto si a un elemento padre le damos un size, este tamaño se heredará en los hijos si queremos que sea proporcional al padre.

La unidad rem (root em), tiene como referencia de medida el elemento font-size del elemento root(html), es decir, si nosotros le damos al html un tamaño de 22px (por ejemplo usando la pseudoclase :root), y queremos que el resto de elementos tengan un tamaño en relación al del html usaremos la unidad rem.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="unidades.css">
</head>
<body>
    <main>
        <article>
            <h1>Titulo</h1>
            <div class="contenido">
                <p>Lorem ipsum dolor sit amet</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis adipisci doloribus neque beatae dolore distinctio corrupti delectus sequi magni. Quisquam similique temporibus recusandae. Tempore atque iste dolores, nisi minus aliquid.</p>
            </div>
        </article>
    </main>
</body>
</html>

La unidad ex puede que sea una de las menos utilizadas, al hacer referencia al tamaño de alto de la primera letra minúscula de la tipografía. De la misma forma que vimos con em y rem tenemos rex, que hace referencia a la primera minúscula pero del elemento padre (html, raíz del documento o root). La unidad cap, al contrario que ex hace referencia a tamaño de la primera letra mayúscula de la tipografía, y también tenemos rcap que funciona con el mismo patrón que rex.

Por último, la unidad lh corresponde al tamaño en función del interlineado de la tipografía, es decir, viene definido en función de la propiedad line-height. rlh corresponde al valor que tiene el elemento padre (html, root).

<< Unidades viewport ¿Qué unidad uso? >>