En este artículo, aprenderemos sobre rem & em en CSS, cómo se diferencian entre sí. El em y el rem son las unidades de tamaño de fuente CSS de longitud relativa que se pueden usar en documentos CSS para hacer que el tamaño de fuente de un elemento específico sea relativo a sus padres.
El em es una unidad de tamaño de fuente CSS en relación con su padre directamente vinculado, rem está en relación con el tamaño de fuente del elemento raíz, que es básicamente el elemento HTML.
También hay muchas otras Unidades CSS disponibles. Comprendamos la diferencia entre em y rem con la ayuda de un ejemplo adecuado.
Unidades em CSS: la unidad em es relativa al tamaño de su padre.
- 1 em = tamaño del padre
- 2 em = el doble del tamaño del padre
- 0.5em = la mitad del tamaño del padre
Ejemplo: Este ejemplo demuestra el uso de la unidad CSS em que especifica el tamaño de fuente en relación con el directo o su elemento principal.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 15px;
font-family: 'Courier New', Courier, monospace;
}
#grandPArent {
font-size: 2em;
}
#parent {
font-size: 2em;
}
#child {
font-size: 2em;
}
#grandChild {
font-size: 2em;
}
</style>
</head>
<body>
<p>Great Grand Parent - Base Font Size</p>
<ul id="grandParent">
<li>GrandParent 1</li>
<ul id="garent">
<li>Parent 1</li>
<ul id="child">
<li>Child 1</li>
<ul id="grandChild">
<li>GrandChild 1</li>
<li>GrandChild 2</li>
</ul>
<li>Child 2</li>
</ul>
<li>Parent 2</li>
</ul>
<li>GrandParent 2</li>
</ul>
</body>
</html>
Explicación : a medida que los elementos se anidan entre sí, el tamaño relativo de los elementos sigue creciendo exponencialmente a una tasa de 2x en el ejemplo anterior.
En este ejemplo, el hijo tiene un tamaño relativo de 2em (2x el tamaño de fuente de un padre) con respecto al padre que a su vez es 2em (2x el padre del elemento padre) frente al abuelo y ahora es 4 veces el tamaño del abuelo.
Producción:
unidad em CSS
- Tamaño del elemento base (bisabuelo): 15 px
- Abuelo1,2 Tamaño: 30px
- Padre 1,2 Tamaño: 60px
- Niño 1,2 Tamaño: 120px
- Nieto 1,2: 240px
Unidades rem CSS: La unidad rem es relativa al tamaño de su elemento padre raíz base.
- 1 rem = tamaño del padre raíz (elemento HTML)
- 2 rem = dos veces el tamaño del padre raíz (elemento HTML)
- 0.5r em = la mitad del tamaño del padre raíz (elemento HTML)
En este caso, a medida que los elementos se anidan entre sí, el tamaño relativo de los elementos permanece constante, ya que el tamaño de cada elemento es proporcional al elemento HTML raíz y no a su padre directo y, por lo tanto, las propiedades no se transfieren más abajo a los elementos secundarios y secundarios.
En este ejemplo en particular, el padre tiene un tamaño relativo de 2 rem (2 veces el tamaño de fuente del elemento HTML raíz) con el elemento raíz que es el mismo que su hijo y su nieto y, por lo tanto, el tamaño incluso después de anidar en múltiples niveles permanece constante .
Ejemplo: Este ejemplo demuestra el uso de la unidad rem de CSS que especifica el tamaño de fuente en relación con el elemento raíz.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 15px;
font-family: 'Courier New', Courier, monospace;
}
#grandParent {
font-size: 2rem;
}
#parent {
font-size: 2rem;
}
#child {
font-size: 2rem;
}
#grandChild {
font-size: 2rem;
}
</style>
</head>
<body>
<p>Great Grand Parent - Base Font Size</p>
<ul id="grandParent">
<li>GrandParent 1</li>
<ul id="garent">
<li>Parent 1</li>
<ul id="child">
<li>Child 1</li>
<ul id="grandChild">
<li>GrandChild 1</li>
<li>GrandChild 2</li>
</ul>
<li>Child 2</li>
</ul>
<li>Parent 2</li>
</ul>
<li>GrandParent 2</li>
</ul>
</body>
</html>
Producción:
unidad rem CSS
- Tamaño de fuente de la base (bisabuelo): 15 px
- abuelo1,2/padre1,2/hijo1,2/nieto1,2 Tamaño de fuente = 30 px
Nota: Observe el resultado de los dos ejemplos anteriores para conocer la diferencia.
Ventajas de usar rem sobre em :
- Mientras escalamos nuestra aplicación a un diseño receptivo utilizando la funcionalidad de consulta de medios, podemos modificar directamente el tamaño de fuente base del elemento raíz y cada niño puede escalar directamente con solo una consulta de medios en el elemento raíz.
- Cuando el usuario ha alterado el tamaño de fuente base predeterminado de cualquier navegador, nuestra aplicación escala bien en este caso con el uso de unidades rem de CSS.
Publicación traducida automáticamente
Artículo escrito por devashish_ y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA