移动web rem适配解决方案——flexible.js+rem（淘宝）

移动web rem适配解决方案——flexible.js+rem（淘宝）
首先，项目设计稿尺寸为750px。
一、下载flexible.js：（它的原理是将当前设备宽度划分为10等份）

//安徽工业经济职业技术学院 web技术项目组-收集整理 2022-10-20

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

二、设置meta标签

三、引入flexible.js文件

四、针对移动web项目，初始化样式

 /* 如果屏幕超过了750px，那么我们就就按照750px设计稿来走，不会让页面超过750px ,使用媒体查询来设置*/
      @media screen and (min- 750px) {
        html {
          font-size: 75px !important;
        }
      }
      body {
        min-width: 320px;
        max-width: 750px;
       /* flexible.js把设计稿750px进行10等分，所以html文字大小设置为75px(750px/ 10)，页面元素rem值:页面元素的px值/ 75(750px/75)*/
        width: 10rem;
        margin: 0 auto;
      }

六、针对不同编译器，选用适合的插件，提升编译效率。
VSCODE 中可使用插件：cssrem，默认的Root Font Size是16px，此时需要改为75px。
HBuilderX中可设置1rem对px转换比例为75。