Why did Bootstrap 4 choose rem and em instead px?

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