amfe-flexible.js阿里手淘可伸缩布局方案

前言:

由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方案。vw的兼容方案可以参阅《如何在Vue项目中使用vw实现移动端适配》一文。

Git-hub amfe-flexble: https://github.com/amfe/lib-flexible/
这里安装 git 上给的方法进行使用

1. 安装

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

5. 在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 })
        ]
      }
    }
  }
}