vue使用lib-flexible实现屏幕适配

前言：有时候我们要用到屏幕灵活自适应，就不能将页面高度写死；所以怎么办呢？需要引入lib-flexible使用。引入方法及配置如下所示：
注：此方法是针对vue 2.x版本配置的。

一、安装和配置lib-flexible

1、npm install lib-flexible -S //安装lib-flexible

2、import 'lib-flexible //在vue项目里面的src目录下的main.js文件全局引用'

3、将vue项目下的index.html文件里面的一行代码注释掉，否则lib-flexible可能不会起作用：

4、在node_modules目录下找到lib-flexible文件夹里面的flexible.js文件，并进行修改：

①、flexible.js文件未修改前的：

②、flexible.js文件修改后的：

二、安装和配置px2rem-loader

为什么要安装px2rem-loader呢？因为在开发中拿到的设计稿页面像素单位是px，要是每一次都需要手动转成rem的话，就十分耗费时间精力，所以px2rem-loader就可以帮我们的大忙了。

1、npm install px2rem-loader -D //安装px2rem-loader

2、安装px2rem-loader后，在vue项目里面的build文件夹目录下的utils.js文件里面（const cssLoader同级位置后面）新增px2remLoader这部分内容并设置remUnit的属性值（这个值要和前面在flexible.js文件里面设置的值相对应，如flexible.js里面设置的为rem=with/10，并且设计稿像素宽度为1920px的话，就表明remUnit要设置的值为1920/10=192，以此类推）：

3、新增px2remLoader后，将px2remLoader加入同utils.js文件里面generateLoaders函数里面的loaders数组中这两个地方去即可：

4、重启服务方可生效（一定要重新启动项目哦，不然不起效果！）。

5、完成了上面步骤后，就可以对页面涉及到的css宽度、高度，还是正常采用px单位编写像素值，项目会自动将px转换成rem，并保持自适应适配效果。

总结：有了lib-flexible和px2rem-loader这两个就可以很方便的解决vue项目屏幕适配的问题了，只有就可以实现页面自适应了，是不是很方便呢！