前面博客提到 关于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()
网友评论