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

转载于:https://www.cnblogs.com/jsusu/p/7227407.html