@liyuzhong/simplecss/rem.js

基于normalize.css的简单css库

;(function (win) {
    // 设置基准字体大小，以750的设计稿为标准，字体设置成10,
    // 如果设计稿的尺寸是10像素，对应的样式尺寸是1
    const UIWidth = 750
    const htmlFontSize = 10
    const fitMinWidth = 320
    const fitMaxWidth = 960
  
    const doc = win.document
    const htmlEl = doc.documentElement
    const resize = 'orientationchange' in win ? 'orientationchange' : 'resize'
    let resizeTimer
  
    function startFit() {
      let screenWidth = doc.body.clientWidth || htmlEl.clientWidth
      if (screenWidth < fitMinWidth) screenWidth = fitMinWidth
      if (screenWidth > fitMaxWidth) screenWidth = fitMaxWidth
  
      let baseFontSize = (screenWidth * htmlFontSize) / UIWidth
      baseFontSize = baseFontSize > 10 ? 10 : baseFontSize
      baseFontSize = baseFontSize < 5 ? 5 : baseFontSize
      htmlEl.style.fontSize = baseFontSize + 'px'
      doc.documentElement.style.setProperty('--basesize', baseFontSize)
    }
  
    if (htmlEl && win.addEventListener) {
      // 窗口发生改变时重新计算
      win.addEventListener(
        resize,
        function () {
          win.clearTimeout(resizeTimer) //防止执行两次
          resizeTimer = win.setTimeout(startFit, 300)
        },
        false
      )
  
      // 浏览器后退时重新计算
      win.addEventListener(
        'pageshow',
        function (e) {
          if (e.persisted) {
            win.clearTimeout(resizeTimer)
            resizeTimer = win.setTimeout(startFit, 300)
          }
        },
        false
      )
  
      // 页面加载完毕后计算
      win.addEventListener('DOMContentLoaded', startFit, false)
    }
  })(window)