css的单位rem在标签层级较深的情况下，出现了渲染大小不一致的问题
rem非常正常显示大小
目前测试的情况
现象1：
| 在浏览器里对overflow，display操作会在运行环境下恢复正常
| 但是如果直接写到代码里面，运行起来还是有问题
现象2:
| 如果给它的父元素设置固定高度，一切就恢复正常了，并且写入代码刷新也显示正常
| 但如果是往上三级，父元素的父父级设置就没效果
目前这种情况设置高度可以解决大部分情况下的需求。但问题是：在考虑元素内部是多行文字无法确定高度的情况时，就没办法了……
只求搞明白这种现象到底是怎么回事……
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1,user-scalable=no">
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var meta=document.createElement('meta')
meta.setAttribute('name','viewport')
meta.setAttribute('content','initial-scale='+1/devicePixelRatio+',user-scalable=no')
document.querySelector('head').appendChild(meta)
function setRem(){
var remDefault=document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px';
}
setRem()
window.onresize=setRem
</script>
<style>
.h1 {
font-size: 0.16rem;
}
p {
font-size: 0.12rem;
}
</style>
</head>
<body>
<div class="h1">
以上的测试我发现：当文档出现换行的时候，这个问题才会出现，以上案例里的p就出现了这种情况：预期是24px 但是最终计算得到的是36px
<p>以上的测试我发现：当文档出现换行的时候，这个问题才会出现，以上案例里的p就出现了这种情况：预期是24px 但是最终计算得到的是36px</p>
</div>
</body>
</html>以上的测试我发现：当文档出现换行的时候，这个问题才会出现，以上案例里的p就出现了这种情况：预期是24px 但是最终计算得到的是36px
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我自己琢磨了一种方法：在rem难以控制的地方，用百分比来处理。（效果依旧在不可控范围内：有些正确，有些不正确）
这个方案只是当初淘宝设计的flexible的简化方案，并且已经在当前项目中使用。所以替换成最新版本的已经来不及了……
说一下我最终的解决方案：
对于段落文本以及参照当初淘宝给出的方案，用dpr判断，然后css写适配来完成。
详细地址：https://www.w3cplus.com/mobil...
你要不要把你的代码先贴一下？
你是不是忘记了不同设备的分辨率不同，不通设备的可视区定义的大小也不同，你的代码不是兼容性的代码，而且你能确定你测试的设备的devicePixelRatio就是1。建议你
参考一个https://github.com/amfe/lib-f...