【rem】【样式出错】css使用rem 在部分移动设备中样式出错的解决方法

实测部分机型*中，emoji表情包有部分不展示了，如图

调试过程(解决方案在最下面,此处可以略过)：

• 苹果和部分安卓都显示正常，在微信开发工具中调试，发现使用的单位是rem，emoji的表情实际上是一张emoji集合图，通过css定位实现的展示，以下贴上主要实现css

<style>
.emoji .item:nth-child(1) {
    background-position: 0 -0rem;
}
.emoji .item {
    width: 1.6rem;
    height: 1.6rem;
    background: url(../images/allface.jpg);
    background-size: 1.6rem auto;
    margin: 0.1rem 0.2rem;
    float: left;
}
</style>

• 刚开始发现是隔了2,隔了4行展示,还以为有规律的,顺着这个思路去调了里面的参数(width,margin都调了,然并卵)
• 怀疑是background-position的适配问题,网上没有什么相关问题
• 试着去搜搜看是不是因为特殊机型的缘故,带着机型(红米)去搜,发现有的问题是描述红米分辨率的,于是试着去调试工具中更改机型(分辨率),看看能不能在工具上复现问题
• 尝试了各种奇怪的分辨率还有Dpr,都无果(分辨率引起了我的注意)
• 开始怀疑rem单位的适配问题,百度了一下(结果见附1),果不其然,又想起了移动端的适配,有兴趣的可以点击链接了解一下https://div.io/topic/1092
• 搜索关键词rem 部分机型出错 ,了解到部分手机rem并不那么适配，实际的大小和其他设备有偏差
• 找了几个回答其中https://my.oschina.net/u/879103/blog/1785521的回答最为接近,尝试了一下发现750这个数值应用到实际页面,页面元素变得异常的大,调试原稿数值750为1920,成功解决问题*

解决方法如下(Show me the code)

原理就是重新根据设备换算rem值

;(function(win) {
     var docEl = win.document.documentElement,
         tid;
 
     function refreshRem() {
         var width = docEl.getBoundingClientRect().width;
         var rem = width / 750*100;//以750px为原稿，除以100可得各元素的rem
         docEl.style.fontSize = rem + "px";
         var actualSize = parseFloat(window.getComputedStyle(docEl)["font-size"]);
         if (actualSize !== rem) {
             var remScaled = rem / ( actualSize / rem );
             docEl.style.fontSize = remScaled + "px"
         }
    }
 
     function dbcRefresh() {
         clearTimeout(tid);
         tid = setTimeout(refreshRem, 100)
     }
 
     win.addEventListener("resize", function() { dbcRefresh() }, false);
     win.addEventListener("pageshow", function(e) {
         if (e.persisted) { dbcRefresh() }
     }, false);
     refreshRem();
})(window);

 

结果

 

注1:*部分机型包括华为荣耀9 ,华为荣耀8 Lite ,OPPO R9 s 红米4A ,红米1s（更新中）

注2:*刚开始不会调随便调了几个数值(正常应该一行行代码了解他们的意思) , 发现效果均不理想,又换了几个代码,甚至放弃重置rem的适配这个方法,自己改动rem为px,但是工程量太大,又回来研究这个,发现了有原稿值这个关键词,时间有限,并没有去了解这个是啥,但是联想到以前跟设计(这位优秀的mm现在在网龙了)接触的时候有提到分辨率和稿件宽度是1920(这个应该是web页面的宽度吧,抱着试着的心态,将原稿值改成了这个,竟然成功!后续用试了,小于1920的都会出错)

附1图