換算rem的寬度和高度不生效 chrome字體最小爲12px

如今不少前端都用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