换算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