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

rem非常正常顯示大小

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

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

只求搞明白這種現(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">
    以上的測(cè)試我發(fā)現(xiàn)：當(dāng)文檔出現(xiàn)換行的時(shí)候，這個(gè)問題才會(huì)出現(xiàn)，以上案例里的p就出現(xiàn)了這種情況：預(yù)期是24px 但是最終計(jì)算得到的是36px
    <p>以上的測(cè)試我發(fā)現(xiàn)：當(dāng)文檔出現(xiàn)換行的時(shí)候，這個(gè)問題才會(huì)出現(xiàn)，以上案例里的p就出現(xiàn)了這種情況：預(yù)期是24px 但是最終計(jì)算得到的是36px</p>
  </div>
</body>
</html>

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

回答

編輯回答

忠妾

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

2017年3月31日 14:34

編輯回答

裸橙

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

2017年7月8日 05:53

編輯回答

她愚我

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

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

2018年7月23日 02:29