vue项目手机端适配
1,安装 flexible和 postcss-px2rem(命令行安装)
npm install lib-flexible --save
npm install postcss-px2rem --save
2, 引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
import ‘lib-flexible’
注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录 public/index.html 中的这个标签删除!!!
3, 配置postcss-px2rem
vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多,将一些默认配置进行了更好更严密,让开发变得更高效的封装。具体请看vue-cli官网 https://cli.vuejs.org/zh/guide/
px2rem的配置放在vue-cli3 项目中vue.config.js中(找不到?可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js)
具体配置内容如下:
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5
})
]
}
}
},
}
https://blog.csdn.net/marendu/article/details/100890951 详细列检