如何基于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的插件，让我们可以直接在代码中写px。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。