vue使用lib-flexible实现屏幕适配
前言:有时候我们要用到屏幕灵活自适应,就不能将页面高度写死;所以怎么办呢?需要引入lib-flexible使用。引入方法及配置如下所示:注:此方法是针对vue2.X版本配置的。1.npm install lib-flexible -S //安装lib-flexible2.import 'lib-flexible //在vue项目里面的src目录下的main.js文件全局引用'3.将vue项目下的i
前言:有时候我们要用到屏幕灵活自适应,就不能将页面高度写死;所以怎么办呢?需要引入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项目屏幕适配的问题了,只有就可以实现页面自适应了,是不是很方便呢!
更多推荐
所有评论(0)