How to automatically convert px to rem in bootstrap

Conversion between Rem value and Px in CSS3:

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

rem is a relative size value, which is relative to the root element ,

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

Related recommendations: "Bootstrap Getting Started Tutorial"

Then other fonts are the values ​​obtained by dividing the value you want by 14;

For example The default twentytwelve theme size is 960px; converted to rem, it is 960/14=68.57142857142857rem; 24px of

padding is 24/14=1.714285714285714rem, and so on.

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

I don’t know what the benefits of using this rem unit are, but if you choose 62.5% as the font size of the root element, then the conversion between px and rem is to directly divide px by 10 to get rem, which is better than em It's much simpler. I still haven't figured out how to convert between em and px.

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

The above is the detailed content of How to automatically convert px to rem in bootstrap. For more information, please follow other related articles on the PHP Chinese website!