VUE移动端适配
VUE移动端适配
安装：npm install postcss-pxtorem@5.1.1 --save
// 注意：6.0.0版本配置有误，暂未去了解处理；
// 解决办法:安装5.1.1版本，实测该版本能用
一、在src目录下新建 libs/rem.js 文件
放入以下代码：
1 (function (doc, win) { 2 var docEl = doc.documentElement 3 var isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) 4 var dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1 5 dpr = window.top === window.self ? dpr : 1 6 // 被iframe引用时，禁止缩放 7 dpr = 1 8 var scale = 1 / dpr 9 var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' 10 docEl.dataset.dpr = dpr 11 var metaEl = doc.createElement('meta') 12 metaEl.name = 'viewport' 13 metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale 14 docEl.firstElementChild.appendChild(metaEl) 15 var recalc = function () { 16 var width = docEl.clientWidth 17 if (width / dpr > 750) { 18 width = 750 * dpr 19 } 20 // 乘以100，px : rem = 100 : 1 21 docEl.style.fontSize = 100 * (width / 750) + 'px' 22 } 23 recalc() 24 if (!doc.addEventListener) return 25 win.addEventListener(resizeEvt, recalc, false) 26 })(document, window)
二、在main.js中引用
import './libs/rem.js'
三、修改.postcssrc.js 文件
在module.exports的plugins中加入：
module.exports = {
plugins: {
"postcss-pxtorem": {
rootValue: 100,
propList: ["*"],
},
},
};
完成，在项目中开发直接可以按照px单位来开发
设计图为750PX基准，打包以后的单位为100px=1rem；更方便于开发
完事以后记得重新运行哟！
