¿En qué se diferencia rem de em en CSS?

En la fuente del sitio web, a veces he visto a los desarrolladores usar la remunidad. ¿Es similar a em? Lo probé para ver qué hace realmente, pero ¿a qué se refiere?

Manifestación

HTML

<div>Hello <p>World</p></div>

CSS

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

EMs son relativos al tamaño de fuente de sus padres

REMs son relativos a un tamaño de fuente base

Esto es importante cuando los contenedores intermedios cambian los tamaños de fuente. Los elementos secundarios con EM se verán afectados, los que utilizan REM no.

La unidadrem (raíz em) representa el tamaño de fuente del elemento raíz. En un documento HTML, el elemento raíz es el htmlelemento. El soporte del navegador aún es limitado.

Mientras que em es relativo al tamaño de fuente de su padre directo o más cercano, rem solo es relativo al tamaño de fuente html (raíz).

em da la capacidad de controlar un área de un diseño. Como en, escale el tipo en esa área específica relativamente. rem ofrece la capacidad de escalar el tipo de letra en toda la página fácilmente.

Aquí hay un ejemplo. divsdimensionado con remcambio a medida que cambiamos el font-sizedel htmlelemento. Mientras que los de tamaño con emsolo cambian a medida que cambiamos el font-sizede div.

$(function() {
  var htmlSize = $('input#html');
  htmlSize.change(function() {
    $('html').css('font-size', htmlSize.val() + 'px');
  });

  var divSize = $('input#div');
  divSize.change(function() {
    $('div').css('font-size', divSize.val() + 'px');
  });
});

* {
  float: left;
  font-size: 20px;
  margin:2px;
}
label {
  clear:both;
}
div {
  border: thin solid black;
}
div.rem1 {
  width:4rem;
  height: 4rem;
  clear: both;
}
div.rem2 {
  width: 3rem;
  height: 3rem;
}
div.em1 {
  width: 4em;
  height: 4em;
  clear: both;
}
div.em2 {
  width: 3em;
  height: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Change html font-size
  <input id="html" type='number' value="20" min="18" max="30" />
</label>
<div class="rem rem1">rem</div>
<div class="rem rem2">rem</div>
<label>Change div font-size 
  <input id="div" type='number' value="20" min="18" max="30" />
</label>
<div class="em em1">em</div>
<div class="em em2">em</div>

Básicamente, em es relativo al padre más cercano en CSS, mientras que rem es relativo al padre de la página, que suele ser la etiqueta html ...

Verá la diferencia claramente si ejecuta el CSS a continuación y cómo el padre lo está efectuando:

html {
  font-size: 16px;
}

.lg-font {
  font-size: 30px;
}

p.rem {
  font-size: 1rem;
}

p.em {
  font-size: 1em;
}

<div class="lg-font">
  <p class="em">Hello World - em</p>
</div>

<div class="lg-font">
  <p class="rem">Hello World - rem</p>
</div>

Resumen:

• rem: una CSSunidad relativa al tamaño de fuente del htmlelemento.
• em: una CSSunidad relativa al tamaño de fuente del elemento padre .

Ejemplo:

.element {
  width: 10rem;
  height: 10rem;
  background-color: green;
  font-size: 5px;
}

.innerElement {
  width: 10em;
  height: 10em;
  background-color: blue;
}

<div class="element">
  <div class="innerElement"></div>
</div>

En el ejemplo anterior, el cuadrado verde mide 160 px por 160 px (a menos que no tengas el navegador predeterminado en 16px). Esto se debe a que el navegador predeterminado del htmlelemento font-sizees 16pxy 10rem* 16px= 160.

La plaza interior es 10emgrande. Debido a que su elemento padre es 5pxel cuadrado, es 5em * 10px = 50px.

¿Cómo es esto útil?

Configurando todas las unidades para que remtengan las siguientes ventajas:

• Podemos escalar toda nuestra aplicación con una consulta de medios CSS, en esta consulta de medios podemos especificar el tamaño de fuente. Al modificar el tamaño de la fuente, todos los elementos que tienen la unidad remse escalarán en consecuencia.
• Cuando los usuarios no estén utilizando el tamaño de fuente predeterminado del navegador de 16pxnuestra aplicación, se ajustará al tamaño de fuente seleccionado por el usuario.

rem, em y px son unidades diferentes de tamaño de fuente en css.

em Un em es igual al tamaño de fuente calculado del padre de ese elemento. ex: elemento div definido con font-size: 16px, sus hijos 1em = 16px.

rem valores rem son relativos al elemento html raíz. ej .: si el tamaño de fuente del elemento raíz es 16px, 1 rem = 16px para todos los elementos.

Referencia: https://medium.com/code-better/css-units-for-font-size-px-em-rem-79f7e592bb97

https://stackoverflow.com/a/13941345/9093112 : es la mejor respuesta, pero solo quiero agregar

Default browser size is 16px = 1em = 1 rem

em y rem son unidades relativas basadas en fuentes y es diferente usar ems para fuentes o para longitud, por lo que tanto ems como rems se basan en fuentes, pero la diferencia entre ellos es que ems usa el elemento principal o actual como referencia mientras que rems use el tamaño de fuente raíz como referencia.

Si queremos usar ems para tamaños de fuente, entonces la referencia es simplemente el tamaño de fuente calculado por los padres de manera similar a lo que sucede con los porcentajes.

En el siguiente ejemplo, un tamaño de fuente de tres em en el elemento secundario del encabezado da como resultado 72 píxeles simplemente porque es tres veces el tamaño de fuente principal, que es (150/100) * 16 = 24px. Ahora para la longitud, es un poco diferente. El relleno 2em en el encabezado, dado que es una medida de longitud, usa el tamaño de fuente del elemento actual como referencia y ya sabemos que son 24 píxeles, por lo que 2em dará como resultado un relleno de 48 píxeles, ¿entendido? Es una diferencia sutil, pero importante. Cuando usa em si es para fuentes, la referencia es el padre y para la longitud, la referencia es el elemento actual.

html,body{
font-size:16px;
width:80vw;
}
header{
font-size:150%;
padding 2em;
margin-bottom:10rem;
height:90vh;
widht 1000px;
}
header-child{
font-size:3em;
padding:10%;
}

Acerca del rem, en realidad funciona de la misma manera tanto para tamaños de fuente como para longitudes porque siempre usa el tamaño de fuente raíz como referencia. Esto significa que el relleno de 10 rem que tenemos aquí resultará en 160 píxeles porque el tamaño de fuente raíz es 16.

En la unidad relativa de em , el tamaño de fuente se mide sobre la base del tamaño de fuente principal más cercano, pero si el tamaño de fuente no está definido para ninguno de los elementos principales, el tamaño de fuente predeterminado se definirá de acuerdo con el elemento html raíz.

La unidad relativa rem se calcula solo por el elemento html raíz , por lo tanto, el tamaño de fuente del elemento principal no lo afecta

Unidades de medida CSS: em , rem ambas relativas al tamaño del frente de sus padres. El tamaño cambiará según el tamaño de fuente de los padres. Ejemplo:
rem : 100% del tamaño de fuente del elemento raíz.
em : 100% del tamaño de fuente principal.