移动端多屏适配方案

[Yang03]

选择哪个尺寸作为基础

• 从中间尺寸向上和向下适配的时候界面调整的幅度最小。375pt下的设计效果适配到414pt和320pt偏差不会太大
• iPhone 6 plus有两种显示模式，display zoom模式分辨率为1125x2001（iPhone 6的1.5倍），display模式分辨率为1242x2208。iPhone 6和iPhone 6 plus分辨率之间就存在1.5倍的关系 参考

  物理像素(physical pixel)

一个物理像素是显示器上最小的物理显示单元

window.devicePixelRatio获取到当前设备的dpr

移动端布局，为了适配各种大屏手机，方案是使用相对单位rem。

基于rem，针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。

rem = document.documentElement.clientWidth * dpr / 10

动态的设置dpr

使用淘宝的 flexible.js

px2rem

如果10rem == 750px 设计稿 width = 750px 那么 200px = 200/(750/10) + 'rem'

[Yang03]

relative-font-size = 75px

strip-units(number)
    number / ( number * 0 + 1 )

/**
 * 基于HTML的相对宽度 以需求大小 / 32px
 * 此函数对项目的响应式布局非常关键
 * @param $px int 相对的字体大小
 */
pxToRem(len)
    1rem * (strip-units(len) / strip-units(relative-font-size))