自行写的项目打算兼容手机端,于是了解了下rem并投入使用。而当时看了别人的文章是把根元素 font-size
设置为了 62.5%
,即 1rem=10px
。
当时的我:为什么要等于 10px,我直接 1rem = 1px
,一个font-size: 6.25%
就拍了上去。
一开始写着没问题,待发布给别人预览的时候,悲剧了
经验证,1+ 和 qq 自带浏览器、夸克、uc 浏览器会出以上问题
原因
问题浏览器中,根节点元素的字体大小不能小于 10px
,若小于,则按照 10px
处理。因此由于我上面设置了 font-size: 6.25%
即根元素 html 字号为 1px
,导致整个页面被放大了 10
倍
解决方法
老老实实把根节点字号设置为不小于 62.5%
,再将所有元素宽度统一掉 10
,问题解决