flexble.js开源前端自适应框架

开源框架 flexible.js

前面博客提到 关于rem小数点的问题里面就使用了这个框架，这篇博客详细的给大家做一个详细介绍。

一：下载框架——>点击下载 访问密码 59e8

二：引入框架

 注意：下面这句代码可以省略不写， flexible.js 会进行动态生成。欢迎学习交流—— 梦幻雪冰

三：字体大小设置

字体的设置，仍旧使用px作为单位，并配合用data-dpr属性来区分不同dpr下的的大小。关于这个dpr可以查看设备像素比（devicePixelRatio）博客。

实例代码：

梦幻雪冰

div {

font-size: 12px;

/*设备像素比为1的时候，字体大小为24px;*/

}

[data-dpr="2"] div {

font-size: 24px;

/*设备像素比为2的时候，字体大小为24px;*/

}

[data-dpr="3"] div {

font-size: 36px;

/*设备像素比为3的时候，字体大小为36px;*/

}

梦幻雪冰、独行冰海

查看结果：

1、设备像素比等于1的时候

2、设备像素比等于3的时候

四：一些常用的APIs

梦幻雪冰

// 获取当前页面的dpr值

console.log(lib.flexible.dpr);

// 获取当前页面的rem基准值

console.log(lib.flexible.rem);

// 把rem转换为px

// 参数为字符串

console.log(lib.flexible.rem2px(["2rem"]));

// 参数为数值

console.log(lib.flexible.rem2px([2]));

// 把px转换为rem

// 参数为字符串

console.log(lib.flexible.px2rem(["60px"]));

// 参数为数值

console.log(lib.flexible.px2rem([60])); 

// 刷新当前页面的rem基准值

lib.flexible.refreshRem()