lib-flexible解决vue项目移动端适配

一：项目中引入lib-flexible

（1）项目中安装lib-flexible

```

npm   install    lib-flexible  --save

```

（2）项目入口文件main.js中引入lib-flexible

```

import   'lib-flexible'

```

删除项目根目录下的index.html的meta标签，因为lib-flexible会自动在html的head中添加meta。同时自动设置html的font-size为屏幕宽度除以10，也就是说  1rem = 屏幕宽度/10。比如我们的设计稿是750px，1rem = 75px。假如某个元素是200px，那么我们在css里写这个元素宽度就是200/75=2.67rem，后边其他元素设置的宽度都是  设计图元素宽度/75    rem。这样很难计算，开发效率也低，我们可以使用px2rem-loader自动将css中的px转成rem，有了px2rem-loader我们可以在css中直接写设计图中的px值，由这个插件将px转成rem单位进行适配

二： 安装px2rem-loader

```

npm install  px2rem-loader  --save-dev

```

(1)修改build/utils.js，在exports.cssLoaders中添加如下代码：

```

const px2remLoader = {

    loader: 'px2rem-loader',

    options: {

      remUnit: 37.5    //设计稿的1/10

    }

  }

```

（2）修改generateLoaders方法中的 const loaders 一行

将const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

改为：

```

const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

```

设置完重启项目即可。

注意：px2rem-loader只能自动转化css中的px值，js中想要设置宽高进行适配话，就需要我们自己手动计算出rem值

font-size:28px;/*px*/则不会被转换

参考：https://www.jianshu.com/p/215622ab647e