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

阅读 3.6k
3 个回答

我自己琢磨了一种方法:在rem难以控制的地方,用百分比来处理。(效果依旧在不可控范围内:有些正确,有些不正确)


这个方案只是当初淘宝设计的flexible的简化方案,并且已经在当前项目中使用。所以替换成最新版本的已经来不及了……
说一下我最终的解决方案:
对于段落文本以及参照当初淘宝给出的方案,用dpr判断,然后css写适配来完成。
详细地址:https://www.w3cplus.com/mobil...

你要不要把你的代码先贴一下?

你是不是忘记了不同设备的分辨率不同,不通设备的可视区定义的大小也不同,你的代码不是兼容性的代码,而且你能确定你测试的设备的devicePixelRatio就是1。建议你
参考一个https://github.com/amfe/lib-f...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题