移动端适配需要 postcss-pxtorem和 amfe-flexible
1.vue 肯定要适配移动端,移动端的手机大小不一,这里用到 postcss-pxtorem, 先添加
cnpm install postcss-pxtorem -D 或者 npm install postcss-pxtorem -D,
建议安装 npm i postcss-pxtorem@5.1.1
2.在项目根目录下添加 postcss.config.js 文件,配置
module.exports = {
plugins: {
'autoprefixer': {
overrideBrowserslist: [
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
]
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}
3.再次输入 cnpm i -S amfe-flexible
4.在main.js 添加 import 'amfe-flexible/index.js',
4.1 npm install
4.2 npm run serve
5. 再次安装 amfe-flexible
5.1 npm install --save vue-router
6.在main.js 中引入:
import "pluginunit/vant.js"
7. 运行之后,浏览器中