現在很多前端都用rem來單位元素和字體大小
一般的設置是
html{
font-size:62.5%;
}
換算來源 1rem = 16px
10/16 = 0.625
這樣10px 就等於了1rem
1.4rem = 14px （這樣很好換算）
1.6rem = 16px （這樣很好換算）
在chrome瀏覽器中有一個問題是字體小於12px統一都按12px
but 我們在計算元素的寬高是會出現問題
例如一個div的寬原先是100px 高是100px
按照我們原先的思想 width:10rem & height: 10rem
可是現實中沒有達到我們的預期，真是的是 width:120px (width:10rem) && height: 120px(height:rem)
徹底懵逼了，怎么可能。。。。。
字體大小沒有問題，為啥width和height不好使了。。。。。
原因在於chrome最小字體為12px，剛才已經提到過了，。。
我們在html中設置了font-size：62.5% ，（= 10px）真正的是 =12px
這時候我們知道原因了，可以這樣設置
把 62.5% * 12
然后把原先的值統一除以 2
例如
html{
font-size:125%；
}
div{
font-size: 0.8rem; /*真實值： 16px 怎么來的 16/10/2=0.8*/
width: 5rem; /*真實值： 100px 怎么來的 100/10/2=5*/
}
如果算術不太好的怎么辦
我們可以設置用100來換算
html{
font-size:625%；
}
div{
font-size: 0.16rem; /*真實值： 16px 怎么來的 16/100=0.16*/
width: 1rem; /*真實值： 100px 怎么來的 100/100=1*/
}
這樣和一起的62.5% 換算差不多，就是有從除10變成了除以100