换算rem的宽度和高度不生效 chrome字体最小为12px
Posted tongchuanxing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了换算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
以上是关于换算rem的宽度和高度不生效 chrome字体最小为12px的主要内容，如果未能解决你的问题，请参考以下文章