Que son EM y REM?
Tanto em como rem son unidades flexibles, que dependen del valor establecido de la fuente de nuestro diseño que es interpretado por el navegador en valores de pixeles.
Usar unidades em y rem nos da flexibilidad en nuestros diseños, y la capacidad de escalar elementos en vez de estar atados tamaños fijos, lo que permite que sean responsive y que se adapten a distintos tamaños.
REM
Las unidades rem dependen directamente del elemento raíz de la página, o sea del tamaño de fuente del elemento <html>. Rem es solo relativo al tamaño de fuente raíz del html.
Esto te permiten escalar el proyecto en su totalidad con solo cambiar el tamaño el tamaño raíz de la fuente (por ejemplo en algún tamaño especifico de un media query o tamaño de ventana )
Si el font-size del <html> es 16px, 1rem sería igual a 16px en cualquier parte del documento. Como siempre se refiere al elemento de la raíz, no se ve afectado por el font-size de otros elementos. Por ejemplo:
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 2 × 16px = 32px */
margin-top: 1.25rem; /* 1.25rem = 20px, ya que 1.25 × 16 = 20 */
margin-bottom: 1.25rem;
}
EM
A diferencia del rem, el em depende del último font-size definido dentro del árbol de elementos en el que se encuentra. Las unidades em, aunque aportan flexibilidad a la maquetación, pueden hacer mas complejo tu código, por tal razón deben manejarse con cuidado.
html {
font-size: 100%; /* 100% = 16px */
}
.container {
font-size: 1.25em;
}
.small-font {
font-size: 0.9em;
}
<div class="container"> <p>Titulo</p> <p class="small-font">Texto dentro del contenedor</p> </div> <hr> <p class="small-font">Texto fuera del contenedor </p>
La ventaja de utilizar em es que permite crear componentes totalmente modulares, donde con solo cambiar el valor del elemento padre implicaría cambiar los valores de los elementos hijos.
Utilizar EM y REM a la vez?
Hay algunos que opinan que es mejor utilizar solo em para diseñar todo de manera modular aunque los cálculos sean mas complejos. Otros prefieren la simplicidad de rem donde todos los cálculos dependen del mismo valor de font size del elemento raiz.
Para un selector CSS dado, las propiedades definidas en em cambian con el font-size del elemento actual, las propiedades definidas en rem siempre cambian con el font-size del elemento <html>.
Por ejemplo, si utilizáramos solo em:
html{
font-size:100% /*100%=16px*/
}
.header {
font-size: 1em;
padding: 0.5em 0.75em;
background: #38ceca;
border: 1px solid #b7b7b7;
}
.large-header {
font-size: 2em;
}
p {
margin-left: 0.75em;
margin-right: 0.75em;
}
<div class="header large-header">Título grande</div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <div class="header">Titulo</div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Como resultado podemos observar que el padding izquierdo de .large-header es mayor al de .header esto sucede por em toma como base el tamaño de la fuente en cada elemento, esto significa que .header tiene un font size de 1em que es igual a 16px, y como padding: 0.5em 0.75em que seria igual a 8px 12px lo que hace pensar que el padding en .large-header sera el mismo, pero este no es el caso porque las medidas en em siempre toman como referencia el tamaño de la fuente y en este caso el valor es de font-size: 2em que es igual a 32px lo que provoca que el padding en esta sección que es padding: 0.5em 0.75em sea equivalente a 16px 24px, por eso cuando utilizamos em tenemos que realizar bien los cálculos para que todos los tamaños sean coherentes.
Para solucionar estos valores debemos establecer los valores de el padding izquierdo y derecho de .large-header:
.large-header {
font-size: 2em;
padding-left: 0.375em; /* 0.75/2=0.375 */
padding-right: 0.375em;
}
Podemos simplificar estos cálculos utilizando em y rem a la vez:
html{
font-size:100% /*100%=16px*/
}
.header {
font-size: 1em;
padding: 0.5em 0.75rem;
background: #38ceca;
border: 1px solid #b7b7b7;
}
.large-header {
font-size: 2em;
}
p {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
Ya que rem solo se basa en el font-size de la raíz en el html los valores no se modificaran a menos que se cambiara desde la raíz del mismo. Por eso lo mas optimo es conseguir un equilibrio utilizando em y rem lo que ayudaría a simplificar los cálculos y haría nuestro código mas sencillo.
De esta manera podemos concluir que la ventaja de utilizar rem es la simpleza que nos permite escalar los valores en el proyecto con solo cambiar el valor del font-size en el html de igual manera en los distintos dispositivos cambiando el valor dentro de los media querys. La ventaja de utilizar em es de lograr realizar componente modulares que dependen del valor del elemento padre, con lo que debemos tener cuidado y realizar correctamente los cálculos para obtener una visualización correcta en la disposición de los elementos. De esta manera también es recomendable utilizar em y rem a la vez y conseguir un equilibrio entre ambos.