viewport(视口)就是设备上用来显示网页的那一块区域，但是viewport一般不局限于可视区域的大小，更多情况下都要比可视区域要大。移动设备上一般都为980px,除了windows系统手机为1024px。
移动设备上视口分为视觉视口(即屏幕大小，决定用户看到什么)、布局视口(980px)，然后移动设备或按照一定比例缩放成视觉视口，用来约束CSS布局。
理想视口，我们可以把布局视口设为视觉视口，从而来影响css布局，只需要下面一行代码来实现：
<meta name="viewport" content="width=device-width"/>
这行代码告诉浏览器布局视口的宽度要和设备视口的宽度一样。
我们也可以设置多个属性:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes,maximum-scale=2"/>
其中，
width=device-width 设置布局视口的宽度为屏幕宽度
initial-scale=[number] 设置初始的缩放比率
user-scalable=yes | no 是否允许页面缩放，默认为yes
maximum-scale=[number] 允许最大放大比率
minimun-scale=[number] *允许最小缩小比率，当设定为1 等同于 user-scalable = no *
最后再提一个知识点，就是em 和rem:
em 相对于其父级元素去计算，而rem 相对于html节点字体大小。
