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);

posted @ 2017-07-24 09:56  阿狸很酷  阅读(...)  评论(...编辑  收藏