移动端适配代码

   (function flexible(window,document) {
      var docEl = document.documentElement;
      function setRemUnit(){ 
        var clientWidth = docEl.clientWidth;
        docEl.style.fontSize = (clientWidth / 750 ) * 100 + "px";
        var scaledFontSize = parseInt(window.getComputedStyle(document.querySelector("html"),null).getPropertyValue("font-size"));
        if(parseInt(docEl.style.fontSize) !== scaledFontSize){
          var val= (clientWidth/750)*100;
          docEl.style.fontSize= val * val/scaledFontSize+"px"
        }
      }
      setRemUnit();
      window.addEventListener("resize",setRemUnit);
      window.addEventListener("pageshow",function(e){
        if(e.persisted){
          setRemUnit()
        }
      })
    }(window,document));

设计稿 750px, 如果设计稿写 width:150px;代码写 1.5rem即可

代码分步骤解析：

（1）核心代码：计算 rootFontSize ，计算系数 封装成立即调用函数

(function () {
      function setFontSize () {
        var screenWidth = window.screen.width
        document.documentElement.style.fontSize = (screenWidth / 750) * 100 + 'px'
      }
      setFontSize()
    })()

计算方式如上

（2）当网页变化（resize）的时候

(function () {
      function setFontSize () {
        var screenWidth = window.screen.width
        document.documentElement.style.fontSize = (screenWidth / 750) * 100 + 'px'
      }
      setFontSize()
      window.addEventListener('resize', setFontSize) // 当浏览器切换手机机型
    })()

其实到这，已经完美解决了，但有时候用户骚操作，放大手机字体等等，这样布局就乱了，如果用户放大手机字体，应该把当前页面document.documentElement.fontSize重置成我们算好的

var scaledFontSize = parseInt(window.getComputedStyle(document.querySelector("html"),null).getPropertyValue("font-size"));
    if(parseInt(docEl.style.fontSize) !== scaledFontSize){
    var val= (clientWidth/750)*100;
    docEl.style.fontSize= val * val/scaledFontSize+"px"
}

 

以上all