源码解读 之 Flexible

源码解读 之 Flexible

第一版

https://github.com/amfe/lib-f...

• 获取 meta 标签 scale 值 初始化 dpr
• 判断是否 ios，非ios dpr=1
• ios 获取devicePixelRatio（几倍屏），1，2，3
• 监听屏幕变化设置html，body FontSize（控制1rem，比例）

第二版

https://github.com/amfe/lib-f...

• 获取devicePixelRatio（几倍屏），1，2，3 初始化dpr
• 监听屏幕变化设置html，body
• FontSize（控制1rem，比例）
• 检测是否支持0.5px的特性，通过添加类名hairlines来向下兼容

好处

• 对android不支持高清方案，得以解决
• 代码量减少
• 保护了css媒介media，第一版会破坏css媒介media

补充知识rem与px的转换

上诉讲到 监听屏幕变化设置html，body FontSize（控制1rem，比例） 这里，flexible，会设置html的fontSize为clientWidth / 10。
也就是 1rem= clientWidth / 10
举个例子：

375的屏幕，750px的设计图
1rem = 375 / 10 = 37.5px

再通过postcss-pxtorem转换
写代码就是 
750px满屏宽度
750px ---> postcss-pxtorem ---> 10rem --->（clientWidth / 10） * 10 PX