部分浏览器rem自适应布局无故放大


自行写的项目打算兼容手机端,于是了解了下rem并投入使用。而当时看了别人的文章是把根元素 font-size 设置为了 62.5%,即 1rem=10px

当时的我:为什么要等于 10px,我直接 1rem = 1px ,一个font-size: 6.25% 就拍了上去。

一开始写着没问题,待发布给别人预览的时候,悲剧了

QQ自带浏览器变成了数倍放大版

经验证,1+ 和 qq 自带浏览器、夸克、uc 浏览器会出以上问题

原因

问题浏览器中,根节点元素的字体大小不能小于 10px,若小于,则按照 10px 处理。因此由于我上面设置了 font-size: 6.25% 即根元素 html 字号为 1px,导致整个页面被放大了 10

解决方法

老老实实把根节点字号设置为不小于 62.5%,再将所有元素宽度统一掉 10,问题解决