flexible 适配
基本概念
- 单位英寸像素数（Pixel Per Inch，PPI）：现实世界的一英寸内像素数，决定了屏幕的显示质量
- 设备像素比率（Device Pixel Ratio，DPR）：物理像素与逻辑像素（px）的对应关系
- 分辨率（Resolution）：屏幕区域的宽高所占像素数
REM 适配的问题总结
- 某些Android机型会丢掉rem小数部分
- 占用了rem单位
- 不是纯css方案
- 不适用于文字 ：绝大多数字体是点阵尺寸通常是16px 和24px
- 1px 线条问题
Flexible 视觉稿中的px转换成rem
将视觉搞分为100份每一份被称为一个单位a。同时，1rem单位认定为10a。
750的视觉稿举例
1a = 7.5px
1rem = 75px
例如240px * 120px的元素，最后转换为3.2rem * 1.6rem。
字体不使用rem的方法
配合用data-dpr属性来区分不同dpr下的的大小。
例如：
div {
width: 1rem;
height: 0.4rem;
font-size: 12px; // 默认写上dpr为1的fontSize
}
[data-dpr="2"] div {
font-size: 24px;
}
[data-dpr="3"] div {
font-size: 36px;
}
一些常用APIs
[Number] lib.flexible.dpr
当前页面的dpr值
[Number] lib.flexible.rem
当前页面的rem基准值
[Number|String] lib.flexible.rem2px([Number|String digital])
把rem转换为px
[Number|String] lib.flexible.px2rem([Number|String digital])
把px转换为rem
lib.flexible.refreshRem()
刷新当前页面的rem基准值
