vue-cli 项目里屏幕自适应

不少同窗可能在写h5的时候，也会遇到移动端如何控制屏幕自适应问题！
在移动端网页开发中，咱们能够用手机淘宝的flexible．那么在vue当中，也一样能够用！
接下来就介绍下如何在vue-cli配置的项目里来实现屏幕自适应
1、首先，咱们须要安装flexible库．
项目目录下 cmd命令：npm install lib-flexible

2、而后在项目入口文件main.js里引入lib-flexible
import 'lib-flexible'

3、记得配置meta标签,在index.html文件当中（有的已是有的，就不用修改了）
<meta name="viewport" content="width=device-width, initial-scale=1.0">

4、接着，咱们在项目当中写css的时候将px转成rem,咱们能够借助px2rem这个工具，也是一样要安装

npm install px2rem-loader

 

5、而后就是配置这个工具，因为是loader文件，全部的loader文件都是在until.js文件里的一个方法生成的．

咱们只要在until.js里找到cssLoader这个对象，在它下面再加一个px2remLoader对象便可

代码如图：

这样就配置完成了，以后命令重启项目，咱们只须要在设计稿里量到多少写多少了！

好比：在设计稿里量到title的字体大小为18px,那么在项目中就直接写18px，是否是特爽！

 

原文连接地址：https://www.cnblogs.com/zlbrother/p/7823380.html