移动端适配方案

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()函数使用等等...