app中rem算法

第一次用vue做APP被rem坑惨了

下面贴出 rem 的算法及使用方法

在自定义js中定义函数

export default {
  install: function(Vue, options) {
    Vue.fontSize = function(){
      (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 = 100 * (clientWidth / 750) + 'px';
          };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
      }(document, window));
    }
  }
}

在main.js中引入并加载

import fontSize from './lib/fontSize.js'
Vue.use(fontSize)
Vue.fontSize();

检查原素你就可以看到效果了

在less公共文件中定义函数

.pxToRem(@name,@px) {
    @{name}: (@px / 100) * 1rem;
}

应用的时候先引入定义公共函数的less

然后直接在选择器下使用就可以了

.pxToRem(font-size, 32);