基本一直都在做移动端的开发，rem布局也写了很久，不过对于实现的原理有些模棱两可的盲点，自己总结一下留着以后回顾。 本文分以下几个层面，主打用最最通俗的语言来阐述。
- 布局小例子
- viewport作用
- flexible.js原理
- vw vh
布局小例子----常见困惑
iphone6尺寸是375*667，那给div设置宽度375px后，为什么宽度不是充满屏幕呢? 代码如下：（为了方面看，我全截图吧）
这是为什么呢？ 来看一下页面宽度是多少
viewport作用
viewport是什么？翻译过来就是视窗的意思，只不过在移动端，视窗稍微有点绕。在解释这个之前，不得不引出几个词汇，分别是物理像素（physical pixel），设备独立像素（density-indenpendent pixel），设备像素比（device pixel ratio），要怎么通俗理解这三个词呢？ 容我找找网上的图。
物理像素
手机屏幕显示图像的最小单元。上图中iphone4和3gs，同样大小尺寸情况下，iphone4明显画面细腻很多，这是为什么？屏幕尺寸没变，分辨率提升，画面就细腻了，更通俗一点的就是iphone4用来显示图像的点更多了，把屏幕上的物理像素点想象成整齐排列的点阵，3gs有320 * 480个点而ip4有960 * 640个点。
设备独立像素
如果把物理像素看做是负责显示图像的硬件的话，那么设备独立像素就是css设置中指的像素了。而这一像素，在不同的手机却是呈现不同的，为什么ip4画面细腻？就是人家用4个物理像素点来描绘一个css像素。
设备像素比
也就是常说的dpr ， dpr = 物理像素/设备独立像素 , 理解这个很重要，iphone6的dpr是2，iphonex的dpr是3。
dpr是2的情况下css画一个点，这个点是由4个物理像素点提供支撑的。画一条线的话，那这条线其实是2排物理像素点支撑的。
同理，dpr是3的情况下css画一个点，这个点是由9个物理像素点提供支撑的。画一条线的话，那这条线其实是3排物理像素点支撑的。
viewport登场
还是要拿iphone4和iphone3gs来举例，假如，一张图片分别在两个手机里展示，而在展示前我有个规定，就是用物理像素点来描绘这个图片，那么我们来脑补一下，在哪个手机中的图片显示的大一些？
答案是 3gs 。 为什么呢？ 别忘了上边提到的，iphone4的物理像素点可是3gs的点的二倍呀。组成图片的点数量是固定的，那么只允许用手机的物理像素点来替代图片的点的话，就会是下面这样的情况。
很好，那我觉得在iphone4中图片有些小，我想放大一些，这时我们可以缩放屏幕画面，也就是两个手指来放大iphone4的屏幕画面，也就是我们要对viewport-视窗进行缩放。
在移动端，视窗分为三种，分别为layoutviewport、visualviewport、idealviewport。可以先记住一个，idealviewport就认为是设备宽度就好，iphone6就是375，iphone6p 就是414 ，其余两个先看我下面例子吧。
简要说明下：
meta标签可以控制viewport的缩放。
window.devicePixelRatio ： 查看设备dpr
document.documentElement.clientWidth ： 查看layoutviewport宽度
window.visualViewport.width ： 查看visualViewport宽度
window.innerWidth ： 查看文档宽度
需要来个小结了：
layoutviewport
默认是980 （针对ios）
设置缩放为1 宽度为设备宽度时：就是375（设备宽度）
设置缩放为2 宽度为设备宽度时：还是375（设备宽度）
设置缩放为0.5 宽度为设备宽度时：是750（设备宽度的2倍）
layoutviewport 取设置的宽度或者visualviewport他们中的最大值
visualviewport
默认是980 （针对ios）
设置缩放为1 宽度为设备宽度时：就是375（设备宽度）
设置缩放为2 宽度为设备宽度时：是187.5（设备宽度一半）
设置缩放为0.5 宽度为设备宽度时：是750（设备宽度的2倍）
其实是有公式的，visualviewport = 设备宽度/缩放。也就是visualviewport = idealviewport / initial-scale
