Why Bootstrap 4 choose rem and em instead px?

raduken Source

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.



answered 2 years ago isherwood #1

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

answered 1 year ago Kostas Siabanis #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.

comments powered by Disqus