一、前言
在进行移动端页面适配时，为了让页面在不同设备看起来不突兀、刚好按照一定的比例显示，我们都知道使用下面这一行代码，但是有真正去了解过他它为什么要这么做？怎么去做？
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" >
二、相关概念
1.viewport
(1)PC端视口
PC端视口，就是指的是浏览器窗口的大小，可通过document.documentElement.clientWidth获取；
(2)移动端视口
移动端的视口指的是用来显示网页的那部分区域。现在我们将PC端的页面显示在移动端的浏览器上，看看会出现什么效果
到这里，你可能会有疑惑了，为什么我设置的明明是320，可是打印出来的是980呢？其实移动端的视口是分为三个：
a).layout viewport:980px这个值，它是大于浏览器可视宽度的；
b).visual viewport:浏览器的可视宽度；
c).ideal viewport:理想视口，即等于移动设备的宽度；
2.像素、rem、屏幕像素比
(1)物理像素：设备出厂时就固定的，也就是说分辨率是一定的；
(2)逻辑像素：就是css样式中的px，它不等同于物理像素；比如iphone6的物理像素是750 x 1344，逻辑像素是375 x 667，那么它css样式的1个逻辑像素就需要4个物理像素来显示;
(3)dpr像素比：物理像素/逻辑像素
(4)rem:由于不同设备的像素比是不同的，我们不能把宽度写死，那就就要动态来计算每个设备的px，参照跟元素的font-size
计算rem(设计图是750):
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + 'px'
例如：设计稿宽度是750px，有一个元素设计稿上的宽度是50px，设备物理宽度是375px,那么我们在页面上应该设置宽度为 width:50rem，相当于宽度是：50（375/750）=25px；这里能正确算出在375px的设备上刚好占一半,其实可以想象为 rem=（375/750）。
一般浏览器的最小字体是12px，乘以100 放大得以解决。 为了计算方便 我们后面把比率乘以了100，（375/750）100，那么相对应这个元素在设置数值的时候就需要除以100了（50/100）,这样可以保证最后出来的数值不变.
再根据媒体查询获取设置字体大小，字体使用px;
如何更好快速计算rem，有工具吗？
三、meta标签对viewport的控制
1.如何得到理想视口：width=device-width，将理想视口等于设备的宽度
2.缩放比：initial-scale=1
但在ios9中起作用得加上：shrink-to-fit=no
