How to automatically convert px to rem by bootstrap

This article is about how bootstrap automatically converts px to rem. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Conversion between the REM value in CSS3 and Px:

Bootstrap default html {font-size: 10px;}

Rem is a value of relative size relative to the root element

For example, suppose we set the font size of html to html {font-size: 87.5%;} (that is, 14px).

Then the other fonts are the values you want to divide by 14.

For example, the default twentytwelve theme size is 960px, which translates to rem as 960/14=68.57142857142857rem.

Padding's 24px is 24/14=1.714285714285714rem, and so on.

The above 14 is a variable. Relative to your setting of the html font size of the root element, if you set it to 62.5%, the divisor becomes 10. The comparison table is shown on the right:

I don't know the advantages of using this rem unit, but if the font size of your root element is 62.5%, then the conversion between px and rem is that px is directly divided by 10 to get rem, which is much simpler than em. So far, I haven't figured out how to convert em and px.

In addition, rem is not supported by other browsers except ie8 and below ie8. If you want to consider ie8 and take a look at it, you can set a px and then set a rem as the default file of twentytwelve.

Thank you for reading! This is the end of the article on "how to automatically convert px to rem from bootstrap". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!