【rem】【样式出错】css使用rem 在部分移动设备中样式出错的解决方法
125 浏览量
2021-01-20
14:05:29
上传
评论
收藏 158KB PDF 举报
【【rem】【样式出错】】【样式出错】css使用使用rem 在部分移动设备中样式出在部分移动设备中样式出
错的解决方法错的解决方法
实测部分机型实测部分机型*中，中，emoji表情包有部分不展示了，如图表情包有部分不展示了，如图
调试过程调试过程(解决方案在最下面解决方案在最下面,此处可以略过此处可以略过)：：
苹果和部分安卓都显示正常，在微信开发工具中调试，发现使用的单位是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)
}
评论0