移動端適配方案——1rem=100px公式是怎么計算的？

1.首先要知道rem是怎么用的，它是根據根元素大小來計算1rem到底等於多少px，如果根元素為100px，那么1rem=100px，2rem=200px；
模擬場景：設計師的設計稿假設為750px；
假設我們現在有兩個設備，一個設備的寬度就是750px，並且我給這個寬度為750px設備的根元素設置為100px,這樣1rem就等於100px了，很好計算；
另一個設備的寬度為變量dWidth；要想與設計稿的效果一樣，就要進行等比例縮放，此時我們需要求出另一個設備的根元素font-size值（X）為多少；
根據這些信息我們可以推導出以下這個公式：
dWidth/X=designwidth（750）/100=7.5;
根據小學數學可以得出X得值：
X=dWidth*100/desingWidth;
這樣就求出X的大小了，在實際開發中，我們根據設計稿的大小除以100就可以的出元素的rem大小；

原作者：李佳新demo
鏈接：https://www.jianshu.com/p/8587c22f35bc
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

 

附上所有移動端適配方案1/100：以設計圖750為例

(function (doc, win) {

    var docEl = doc.documentElement,

      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

      recalc = function () {

        var clientWidth = docEl.clientWidth;

        if (!clientWidth) return;

        docEl.style.fontSize = (clientWidth / 7.5) + 'px';

      };

    if (!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

  })(document, window);

 

目前我的項目沒使用vue腳手架，通過script標簽引入，使用vue腳手架的話在main.js里import一下，再把引入的自執行函數注入原型中：Vue.prototype.zishiying=zishiying，即可全局使用