css的單位rem在標簽層級較深的情況下，出現(xiàn)了渲染大小不一致的問題

rem非常正常顯示大小

目前測試的情況
現(xiàn)象1：
| 在瀏覽器里對overflow，display操作會在運行環(huán)境下恢復正常
| 但是如果直接寫到代碼里面，運行起來還是有問題
現(xiàn)象2:
| 如果給它的父元素設置固定高度，一切就恢復正常了，并且寫入代碼刷新也顯示正常
| 但如果是往上三級，父元素的父父級設置就沒效果

目前這種情況設置高度可以解決大部分情況下的需求。但問題是：在考慮元素內(nèi)部是多行文字無法確定高度的情況時，就沒辦法了……

只求搞明白這種現(xiàn)象到底是怎么回事……

<!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">
    以上的測試我發(fā)現(xiàn)：當文檔出現(xiàn)換行的時候，這個問題才會出現(xiàn)，以上案例里的p就出現(xiàn)了這種情況：預期是24px 但是最終計算得到的是36px
    <p>以上的測試我發(fā)現(xiàn)：當文檔出現(xiàn)換行的時候，這個問題才會出現(xiàn)，以上案例里的p就出現(xiàn)了這種情況：預期是24px 但是最終計算得到的是36px</p>
  </div>
</body>
</html>

以上的測試我發(fā)現(xiàn)：當文檔出現(xiàn)換行的時候，這個問題才會出現(xiàn)，以上案例里的p就出現(xiàn)了這種情況：預期是24px 但是最終計算得到的是36px

回答

編輯回答

忠妾

你是不是忘記了不同設備的分辨率不同，不通設備的可視區(qū)定義的大小也不同，你的代碼不是兼容性的代碼，而且你能確定你測試的設備的devicePixelRatio就是1。建議你
參考一個 https://github.com/amfe/lib-f...

2017年3月31日 14:34

編輯回答

裸橙

你要不要把你的代碼先貼一下？

2017年7月8日 05:53

編輯回答

她愚我

我自己琢磨了一種方法：在rem難以控制的地方，用百分比來處理。（效果依舊在不可控范圍內(nèi)：有些正確，有些不正確）

這個方案只是當初淘寶設計的flexible的簡化方案，并且已經(jīng)在當前項目中使用。所以替換成最新版本的已經(jīng)來不及了……
說一下我最終的解決方案：
對于段落文本以及參照當初淘寶給出的方案，用dpr判斷，然后css寫適配來完成。
詳細地址：https://www.w3cplus.com/mobil...

2018年7月23日 02:29