flexible方案（阿里早期开源的一个移动端适配解决方案，引用 flexible后，在页面上统一使用 rem来布局）
核心代码：
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit();
rem 是相对于 html节点的 font-size来做计算的。
我们通过设置 document.documentElement.style.fontSize就可以统一整个页面的布局标准。
上面的代码中，将 html节点的 font-size设置为页面 clientWidth(布局视口)的 1/10，即 1rem就等于页面布局视口的 1/10，这就意味着我们后面使用的 rem都是按照页面比例来计算的。
这时，我们只需要将 UI出的图转换为 rem即可。
以 iPhone6为例：布局视口为 375px，则 1rem=37.5px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/37.5=2rem。
当然，每个布局都要计算非常繁琐，我们可以借助 PostCSS的 px2rem插件来帮助我们完成这个过程。
下面的代码可以保证在页面大小变化时，布局可以自适应，当触发了 window的 resize和 pageShow事件之后自动调整 html的 fontSize大小。
window.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
vh、vw方案
vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。
上面的 flexible方案就是模仿这种方案，因为早些时候 vw还没有得到很好的兼容。
-
vw(Viewport's width)：1vw等于视觉视口的1% -
vh(Viewport's height):1vh为视觉视口高度的1% -
vmin:vw和vh中的较小值 -
vmax: 选取vw和vh中的较大值
如果视觉视口为 375px，那么 1vw=3.75px，这时 UI给定一个元素的宽为 75px（设备独立像素），我们只需要将它设置为 75/3.75=20vw。
这里的比例关系我们也不用自己换算，我们可以使用 PostCSS的 postcss-px-to-viewport 插件帮我们完成这个过程。写代码时，我们只需要根据 UI给的设计图写 px单位即可。
当然，没有一种方案是十全十美的， vw同样有一定的缺陷：
-
px转换成vw不一定能完全整除，因此有一定的像素差。 -
比如当容器使用
vw，margin采用px时，很容易造成整体宽度超过100vw，从而影响布局效果。当然我们也是可以避免的，例如使用padding代替margin，结合calc()函数使用等等...