bootstrap default html{font-size: 10px;}
rem is a relative size value relative to the root element <html>,
For example, suppose we set the value of the font size of html html｛font-size: 87.5%;｝(that is, 14px).
Then other fonts are the value 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 above 14 is a variable. Compared with your setting of the root element html font size, if you set it to 62.5%, the divisor will become 10. The comparison table is as shown on the right:
I don't know the benefits of using this rem unit, but if you choose 62.5% for the font size of the root element, the conversion between px and rem is that px is directly divided by 10 to get rem, which is much simpler than em, Until now, I have not 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 later, you can set a px and then a rem like the default file of twentytwelve.
Reference: http://lms.im/html-css/1069.html