Why Bootstrap 4 choose rem and em instead px?

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

It is worth mentioning that Bootstrap 4 kept breakpoints in px and not em. From the docs:

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

I switched to using rems instead of px a while back, I can tell ya it was the best choice.

Rems are 100% scalable, I base all my sizing on what looks good on a laptops and below, then at 1600px media query or greater, adjust the html font size and viola!, the entire site "scales up" 100% proportionally.

I'm starting to incorporated vw now too for section paddings and fonts that need to go big like that found in hero sections, combine this with calc for example calc(3rem + 2vw) and you've got a seriously scalable website with minimal media queries.

When using rems, you need to reset your html font size to 16px.

html {
    font-size: 62.5%;
}

now, 1rem = 10px

so sizing everything is super easy to convert.

30px is now 3rem, 25px is now 2.5rem, 15px is now 1.5rem and so on.

Then on larger screens, change the html to say font-size: 70%, and everything will beautifully scale up.

Be sure to use px for media queries like: @media only screen and (min-width: 1680px)

But 'max-width' can be either px or rems, just depends on the design.

I set my wraps now to 90vw, this prevents anything from touching the screen edge and is and 100% scalable.

.wrap {
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
    max-width: 145rem; /* or use px depending on the design */
}

You can use % too, but with WP Gutenberg out and their full width sections using vw I can get everything to line up to a perfect grid.

Hope this helps.