Why Bootstrap 4 choose rem and em instead px?

Question

I would like know why Boostrap choose rem and em instead px for the new version of Boostrap 4.

We can see here

Some variables examples:

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

It's a good practice use em and rem for:

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

I am just curious about that I could not find on web about this so that reason I am asking.

Answer 1

REMs are useful almost anywhere size is explicitly set.

With rem, all font sizes are relative to the root element (aka, the html tag). The reason for this is to make it easier to scale up or down for devices. You could technically change the html tag to a smaller or larger size to scale all font sizes equally – which is a super nice feature.

... [T]he main thing to take-away is everything is dynamic and relative to the root HTML tag.

For example, change the html css font-size to a different number ... and watch how the entire grid adjusts and scales.

Source: Scotch.io