html - unit - ¿Por qué Bootstrap 4 elige rem y em en lugar de px?

rem vs pt

Question

Me gustaría saber por qué Boostrap elige rem y em lugar de px para la nueva versión de Boostrap 4 .

Podemos ver aqui

Algunos ejemplos de variables:

    $font-size-h1: 2.5rem !default;
    $font-size-h2: 2rem !default;
    $font-size-h3: 1.75rem !default;
    $mark-padding: .2em !default;

Es una buena práctica usar em y rem para:

  margin: 0;
  padding: 0;
  bottom: 0px;
  width: 100%;

Tengo curiosidad acerca de que no pude encontrar en la web sobre esto, por lo que estoy preguntando.

Answer 1

Con rem, todos los tamaños de fuente son relativos al elemento raíz (también conocido como la etiqueta html). La razón de esto es que sea más fácil escalar hacia arriba o hacia abajo para los dispositivos. Técnicamente podría cambiar la etiqueta html a un tamaño más pequeño o más grande para escalar todos los tamaños de fuente por igual, lo que es una característica súper agradable.

... [T] lo principal para llevar es que todo es dinámico y relativo a la etiqueta HTML raíz.

Por ejemplo, cambie el tamaño de fuente html css a un número diferente ... y observe cómo se ajusta y escala la cuadrícula completa.

Fuente: Scotch.io

Answer 2

Vale la pena mencionar que Bootstrap 4 mantuvo los puntos de interrupción en px y no en em . De los docs :

Mientras que Bootstrap usa ems o rems para definir la mayoría de los tamaños, los pxs se usan para los puntos de corte de la cuadrícula y los anchos de contenedores. Esto se debe a que el ancho de la ventana gráfica está en píxeles y no cambia con el tamaño de fuente.