移动端项目在nuxt中使用rem.js
把近期项目中的nuxt配置rem.js分享下,配置后可以在项目中使用rem的单位
第一种, 在nuxt.config.js中的head 配置项中配置, 将rem.js放在static目录下,方便配置路径
head: {
script: [
{ src: '/rem.js', type: 'text/javascript', charset: 'utf-8'}
],
},
第二种 (适用于往head中引入js)
head: {
script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'}],
__dangerouslyDisableSanitizers: ['script']
}
以下是我用的rem.js的内容
(function (win) {
var doc = win.document;
var docEl = doc.documentElement;
var tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width > 750) { // 最大宽度
width = 750;
}
var rem = width / 7.5;
docEl.style.fontSize = rem + 'px';
}
win.addEventListener('resize', function () {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function (e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
})(window);
如果在项目中使用less或sass变量全局注入,不用单独引入的就配置如下
module.exports = {
===========
modules: [
'@nuxtjs/style-resources'
],
styleResources: {
less: '@/assets/style/less/default.less' // less文件路径
},
=======
}
// 配置完就可以全局使用了less变量了