Unidades relativas en CSS - Serie RWD #2

css unidades relativas responsive web design

📅 October 22, 2021 - 📖 6 Min. de lectura

Cuando comenzamos a adentrarnos al mundo de CSS lo más común es aprender usando pixeles, esto a decirlo de manera didáctica esta bien para comenzar y no abrumarse con las medidas relativas, pero a medida que avanzamos y principalmente cuando queremos crear aplicaciones responsivas si o si nos vamos a topar con ellas.

Dicho esto, sí lo más conveniente a la hora de darle estilos a nuestros componentes es usar medidas relativas en vez de absolutas, pero vamos a ver de que trata cada una y como podemos usarlas.

Porcentajes

El porcentaje se toma del ancho total disponible respecto al padre del elemento.

body {
    font-size: 20px;
}

p {
  /* 1em = 20px su contexto es 20px */
  font-size: 1em;
  background: yellow;
  margin: 0 auto;
  width: 75%;
  min-width: 320px;
  max-width: 800;
}

span {
  /* 2em = 40px su contexto es 20px */
  font-size: 2em;
}

Unidades em

em se toma prestado del mundo de la tipografía, cuando defines un font-size de un elemento se toma en relación el tamaño de fuente de su padre.

Al cambiar el tamaño de fuente el tamaño cambia
No uses em para layouts
Usa em en componentes internos

body {
    font-size: 20px;
}

p {
  /* 1em = 20px su contexto es 20px */
  font-size: 1em;
}

span {
  /* 2em = 40px su contexto es 20px */
  font-size: 2em;
}

Si el elemento principal no especifica un valor para el tamaño de fuente, se buscará un valor más arriba en el árbol DOM. Si no se especifica ningún tamaño de fuente hasta el elemento raíz (<html>), se utiliza el valor predeterminado del navegador de 16px.

Algunas cosas complicadas de em

Cuando las unidades em se utilizan en otras propiedades que no sean el tamaño de fuente, el valor es relativo al tamaño de fuente del propio elemento.

.parent {
  font-size: 18px;
}
.child {
  font-size: 1.5em; /* 1em aquí vale 18px */
  padding: 2em 1em; /* 1em aquí vale 27px porque 18px x 1.5 = 27px */ 
}

La medida del padding en la clase child se cumple siempre y cuando este dentro de la clase padre, de lo contrario tomaría su mismo font-size ya que no habría ningún elemento padre que le preceda.

<div class="parent">
  1em aquí es 18px
  <div class="child">
    1em para otras propiedades aquí es 27px, el padding:54px 27px
    <!-- Se toma como medida 1.5 para las demás propiedades que no son el font-size -->
  </div>
</div>

<!-- El elemento padre tiene 18px en el font-size -->
<div class="parent">1em es 18px</div>
<div class="child">1em aquí es = 24px, el padding: 48px 24px</div>

<!-- La cosa se pone complicada xD -->

<div class="parent">
  1em aquí es 18px
  <div class="child">
    1em aquí es = 27px
    <div class="child">
      1em aquí es = 40.5px
      <div class="child">
        1em aquí es = 60.75px
        <div class="child">
          1em aquí es = 91.125px
        </div>
      </div>
    </div>
  </div>
</div>

Recuerde: cuando se utilizan unidades em en tamaño de fuente, el tamaño es relativo al tamaño de fuente del padre. Cuando se usa en otras propiedades, es relativo al tamaño de fuente del elemento en sí.

Unidades rem

La unidad rem, abreviatura de root em es una unidad relativa que siempre se basará en el valor del tamaño de fuente del elemento raíz, que es el elemento <html>. Y si el elemento <html> no tiene un tamaño de fuente especificado, se usa el valor predeterminado del navegador de 16 px.

1 rem = 100% del tamaño de fuente del root <html>
En los nav de algunas páginas web tiene una altura de 4 rem y no cambia puedes usar está medida como referencia de altura de tu nav

.html {
  font-size: 16px;
}
.parent {
  font-size: 15px;
}
.child {
  font-size: 2rem;
}

<div class="parent">
  Tengo 15px
  <div class="child">
        Tengo 32px
    <div class="child">
        Tengo 32px también
      <div class="child">
          Yo también tengo 32px
      </div>
    </div>
  </div>
</div>

Cuando usamos rem mantenemos una consistencia basandonos en el font-size del elemento root y nos evitamos cosas inesperadas.

Las unidades em para la propiedad font-size serán relativas al tamaño de fuente del elemento padre. Las unidades em en otras propiedades que no sean el tamaño de fuente serán relativas al tamaño de fuente del elemento actual. El tamaño de las unidades rem siempre será relativo al tamaño de fuente del elemento html raíz.

em vs rem, ¿cuál es mejor? ¿Cuándo usar em y cuando usar rem?

No hay ninguna unidad mejor realmente usa la de tu preferencia, pero mi recomendación es usar rem para layouts(alturas, margenes, etc) y em para cosas internas (paddings internos o margenes internos del componente, botones cards).

Finalizamos

Hasta aquí hemos llegado al final de esté segundo post de la serie Responsive Web Design, en la siguiente entrada veremos Unidades de viewport, te invito a seguirme en mis redes sociales para que estés enterado de las próximas publicaciones.

Sin más que decir nos leemos en la próxima, ¡Hasta la próxima hacker!