使用viewport中的vm来适配移动端页面

前言

做为一个小前端，常常要和H5打交道，这就面临着不一样终端的适配问题。
Flexible方案经过Hack手段来根据设备的dpr值相应改变<meta>标签中viewport的值，给我更贴切的体会就是经过js脚本根据设备的dpr和设计图的宽度来计算出html的font-size值，而后就运用rem单位开发能够等比例缩放的H5页面。
可是！Flexible已经完成了他自身的历史使命，咱们能够放下Flexible，拥抱新的变化。

作到适配要解决的问题

在移动端布局，咱们须要面对两个最为重要的问题：

• 各终端下的适配问题
• Retina屏的细节处理
  不一样的终端，咱们面对的屏幕分辨率、DPR、1px、2x图等一系列的问题。那么这个布局方案也是针对性的解决这些问题，只不过解决这些问题再也不是使用Hack手段来处理，而是直接使用原生的CSS技术来处理的。

适配终端

之前的Flexible方案是经过JavaScript来模拟vw的特性，那么到今天为止，vw已经获得了众多浏览器的支持，也就是说，能够直接考虑将vw单位运用于咱们的适配布局中。

vw是基于Viewport视窗的长度单位，这里的视窗（Viewport）指的就是浏览器可视化的区域，而这个可视区域是window.innerWidth/window.innerHeight的大小。用下图简单的来示意一下：

蓝色区域就是 window.innerWidth 和 window.innerHeight

在CSS Values and Units Module Level 3中和Viewport相关的单位有四个，分别为vw、vh、vmin和vmax。

• vw：是Viewport's width的简写,1vw等于window.innerWidth的1%
• vh：和vw相似，是Viewport's height的简写，1vh等于window.innerHeihgt的1%
• vmin：vmin的值是当前vw和vh中较小的值
• vmax：vmax的值是当前vw和vh中较大的值

若是设计稿用750px宽度的，100vw = 750px，即1vw = 7.5px。那么咱们能够根据设计图上的px值直接转换成对应的vw值。若是不想本身计算，咱们可使用PostCSS的插件postcss-px-to-viewport，让咱们能够直接在代码中写px。

具体的PostCSS咱们放到另一篇文章吧，毕竟我还不会~

参考资料

大漠--再聊移动端页面的适配