移动端适配方案

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