前言:
由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方案。vw的兼容方案可以参阅《如何在Vue项目中使用vw实现移动端适配》一文。
Git-hub amfe-flexble: https://github.com/amfe/lib-flexible/
这里安装 git 上给的方法进行使用
- 安装
npm install -S amfe-flexible
2.在入口文件min.js中引入
import 'amfe-flexible/index.js'
3.在根目录的index.html 的头部加入手机端适配的meta代码
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
4.安装postcss-adaptive
npm install postcss-adaptive
- 在vue.config.js中进行配置
# remUnit: number, rem unit value (default: 75)
# baseDpr: number, base device pixel ratio (default: 2)
# remPrecision: number, rem value precision (default: 6)
# hairlineClass: string, class name of 1px border (default 'hairlines')
# autoRem: boolean, whether to transform to rem unit (default: false)
module.exports = {
runtimeCompiler: true,
css: {
loaderOptions: {
less: {},
postcss: {
plugins: [
require('postcss-adaptive')({ remUnit: 75 })
]
}
}
}
}
