vue-flexible-rem移动端页面适配

配置 flexible

安装

npm install lib-flexible --save

引入

 // 在项目入口文件 main.js 里 引入 lib-flexible
 import 'lib-flexible/flexible.js'
 // 在项目根目录的 index.html 中添加如下 meta
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

配置 rem

由于设计图中的尺寸是px，所以需要转换成rem，我们使用px2rem这个插件

安装px2rem webpack的loader链接

npm install px2rem-loader --save-dev

配置

结合 lib-flexible 的方案，我们将 options.remUnit 设置成设计稿宽度的 1/10。

1：在 build 》 utils 》 exports.cssLoaders 方法中加入

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 64 // 设计图的1/10
    }
  }

我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 750px。

2：在build》utils》exports.cssLoaders》generateLoaders 方法修改为

  var loaders = [cssLoader, px2remLoader]。

这样在程序中使用px为单位会被自动替换成rem