【rem】【样式出错】css使用rem 在部分移动设备中样式出错的解决方法
实测部分机型*中，emoji表情包有部分不展示了，如图
调试过程(解决方案在最下面,此处可以略过)：
苹果和部分安卓都显示正常，在微信开发工具中调试，发现使用的单位是rem，emoji的表情实际上是一张emoji集合图，通过css定位实现的展示，以下贴上主要实现css
调试过程(解决方案在最下面,此处可以略过)：
苹果和部分安卓都显示正常，在微信开发工具中调试，发现使用的单位是rem，emoji的表情实际上是一张emoji集合图，通过css定位实现的展示，以下贴上主要实现css
.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;
}
刚开始发现是隔了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图
作者：你好啊阿波
相关文章
Laurie
2020-11-30
Blossom
2020-02-02
Serwa
2020-03-20
Rae
2023-07-22
Rhoda
2023-07-22
Hester
2023-07-22
Grace
2023-07-22
Vanna
2023-07-22
Peony
2023-07-22
Dorothy
2023-07-22
Dulcea
2023-07-22
Zandra
2023-07-22
Serafina
2023-07-24
Kathy
2023-08-08
Olivia
2023-08-08
Elina
2023-08-08
Jacinthe
2023-08-08
Viridis
2023-08-08
Hana
2023-08-08
Cybill
2023-08-08