vue移动端适配方案

1.nmp引入

npm install amfe-flexible --save
npm install postcss-pxtorem --save

2.在main.js导入amfe-flexible

import 'amfe-flexible';

3.在vue.config.js配置如下：

module.exports = {

	css: {
		loaderOptions: {
			postcss: {
				plugins: [
					require('postcss-pxtorem')({
						rootValue: 75,//若设计稿宽度为750px;则是75,除以10得到；
						propList: ['*']
					})
				]
			}
		}
	},
}
4.测试html

```html
<div class="title">{{ msg }}</div>
.title{
	width: 750px;
	height: 128px;
	background-color: aqua;
	font-size: 16px;
}

5.npm run serve 启动项目

观察font-size值在不同屏幕下的变化则成功引入;

6.注意：a.内联样式的css样式不适应。
b.若项目启动报错：PostCSS plugin postcss-pxtorem requires PostCSS 8.
解决：在package.json中将postcss-pxtorem版本改为5.1.1；即 “postcss-pxtorem”: “^5.1.1”