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

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

响应式开发,之前我一直是用的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

npm install lib-flexible --save

安装px2rem

npm install px2rem-loader --save-dev

配置flexible和px2rem

配置flexible

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

import 'lib-flexible'

配置px2rem

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

px2rem用法

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

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

/*编译前*/
.selector {
    width: 150px;
    height: 64px; /*px*/
    font-size: 28px; /*px*/
    border: 1px solid #ddd; /*no*/
}
/*编译后*/
.selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

px2rem大坑

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

style src='../assets/style.css'>
 /* px2rem能正常转换 */
</style>

<style>
  /* px2rem不能正常转换 */
  @import '../assets/style.css';
</style>

<style>
  /* px2rem不能正常转换 */
  @import url('../assets/style.css');

</style>
猿梦

发表评论

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