Why did Bootstrap 4 choose rem and em instead px? - css

Question

I would like know why Bootstrap chose to use rem and em instead of px for Bootstrap 4.
We can see an example in the variables.scss file within the project:
$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
$mark-padding: .2em !default;
I couldn't find any explanation by the developers on the web about this. Have they explained why they made this decision anywhere?

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

Answer 2

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.

Answer 3

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.

Answer 4

The other answers are missing one main point here. It's correct that with rem you can change the font size on the root(usually the html element) to change all website's text's font size. In this sense rem gives flexibility to web designers to change whole websites font size. But this can be achieved with the new css variables as well. E.g.
:root{--my-font: 16px}
div {font-size: calc(var(--my-font)*2)}
There's a second and the more important reason for the use of rem as following:
Second reason: users can just ctrl + to increase the size if they want to, yeah? Yes, they can. But!, there's another scenario that we need to consider. Users can change the default font size of their browser through the browser settings, e.g. in chrome go to chrome://settings/appearance and you can set the root font size for all websites. What this does is all website which have their font sizes in em or rem will get affected but the ones with px font sizes won't be affected. This is another main reason for bootstrap to switch from px to rem units.
Change you browser default font and run the following example to see it yourself:
.one {
font-size: 24px;
}
.two {
font-size: 1.5em;
}
.three {
font-size: 1.5rem;
}
<div class="one">I will stay the same, no matter what default browser font settings are</div></br>
<div class="two">I will change in size if you change your browser's default font size.</div></br>
<div class="three">I will change in size as well just like div.two</div>
Refrences:
https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/?ref=heydesigner