移動端適配代碼

   (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