Vue使用Fiexible和px2Rem做响应式开发

2018年3月28日16:08:19 发表评论 84

响应式开发,之前我一直是用的CSS3的media属性和rem来做的,但是这并不能在所有场景下做到响应式开发,在网上找了一些有关响应式开发的文章,发现淘宝的flexible+rem受欢迎程度最高,不过貌似淘宝团队又更新了vh/vw适配的方法。

点我查看flexible地址

不过这完全不影响我们学习flexible+rem适配的方法,其实现在说的这种方法是为了更好的过渡到vh/vw的方法,建议会了这种点击上面的地址去看最新适配的方法。

下面我们主要讲一下在Vue环境下,使用Fiexble和px2Rem做页面的适配。推荐一篇讲flexible的好文

安装flexible和px2rem

这是假设你已经安装了Node环境和用vue-cli搭建好了vue环境
* flexible是最主要的适配文件
* px2rem插件可以将你写的px自动转换为rem

安装flexible

安装px2rem

配置flexible和px2rem

配置flexible

在项目入口文件main.js中添加如下代码,引入flexible

配置px2rem

在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置
Vue使用Fiexible和px2Rem做响应式开发
Vue使用Fiexible和px2Rem做响应式开发

px2rem用法

大家可以参考px2rem官方介绍,下面简单介绍一下。

直接写px,编译后会直接转化成rem ---- 除开下面两种情况,其他长度用这个
在px后面添加/no/,不会转化px,会原样输出。 --- 一般border需用这个
在px后面添加/px/,会根据dpr的不同,生成三套代码。---- 一般字体需用这个

px2rem大坑

有可能你会遇到这种问题,对外部引入css,px2rem能不能转换rem,在实际运用过程中有三种情况,现在只测试第一种可正常转换:

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: