移动端适配方案——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，即可全局使用