flexible 适配

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基准值