モバイルレムアダプティブレイアウト-記録

一部の初心者にとって、remとpxの関係を設定する方法、およびremがどのように適応するかなどはあまり明確ではありません。怪しげな、なじみのある、またはなじみのない、なじみのない、なじみのない、と言う。
jsファイルでのremの設定について簡単に説明します。
コードを参照してください：

;(function (docm, win) {
    
    
  let docmEL = docm.documentElement
  let resize = 'orientationChange' in window ? 'orientationChange' : 'resize'
  docmEL.style.fontSize = (16 * docmEL.clientWidth) / 750 + 'px'
  let resizeRem = function () {
    
    
    docmEL.style.fontSize = (16 * docmEL.clientWidth) / 750 + 'px'
  }
  win.addEventListener(resize, resizeRem, false)
})(document, window)

これはレム設定のコードです。そこには多くのデータや属性があります。Mengxinはそれほど注意を払う必要がないか、これらのことは難しくないと言うのは難しいことではありません。基本的にそれぞれが何を意味するのかが一目でわかります。 。
現在、主に2つの概念が記録されています。

1.設計ドラフトのサイズ

つまり、開発前に何枚の図面を手に入れましたか？750pxまたは640pxなど。そしてこの段落では

(16 * docmEL.clientWidth) / 750 

コードでは、750という単語は設計ドラフトのサイズを指します。

2.remとpxの間の変換関係

これは、現時点で実際の開発で1pxに対応するレムの数が正確であることを意味します。同じで

(16 * docmEL.clientWidth) / 750 

ここで、その中の16はあなたに伝えます、16px = 1rem

別のレムアプローチ

  win.addEventListener(resize, resizeRem, false)
})(document, window)
;(function (win, doc) {
    
    
  function setFontSize() {
    
    
    var baseFontSize = 100
    var baseWidth = 320
    var clientWidth = document.documentElement.clientWidth || window.innerWidth
    var innerWidth = Math.max(Math.min(clientWidth, 480), 320)
    var rem = 100
    if (innerWidth > 362 && innerWidth <= 375) {
    
    
      rem = Math.floor((innerWidth / baseWidth) * baseFontSize * 0.9)
    }
    if (innerWidth > 375) {
    
    
      rem = Math.floor((innerWidth / baseWidth) * baseFontSize * 0.84)
    }
    window.__baseREM = rem
    document.querySelector('html').style.fontSize = rem + 'px'
  }
  var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize'
  var timer = null
  win.addEventListener(
    evt,
    function () {
    
    
      clearTimeout(timer)
      timer = setTimeout(setFontSize, 10)
    },
    false
  )
  win.addEventListener(
    'pageshow',
    function (e) {
    
    
      if (e.persisted) {
    
    
        clearTimeout(timer)
        timer = setTimeout(setFontSize, 10)
      }
    },
    false
  )
  setFontSize()
})(window, document)