什么是流式布局
里面的内容随着屏幕的大小，从而向两处填充。页面布局的时候都是通过百分比来定义宽度，内容向两处填充
整体就像流动的液体一样。
viewport
简单的理解就是用户网页的可视区域（视口）。它是一个虚拟的区域，用来承载网页。打个比方"一张很大的相片需要放入小型的相框中，相框放不下，所以需要等比缩放照片"而viewport就相当于一个虚拟的区域去缩放照片然后放到浏览器中。
至于viewport更多的知识，暂时不介绍那么多。
移动端上viewport的设置
因为我们知道将PC端上的整个网页放到移动端上的时候，手机不能完全显示，会出现滚动条。所以我们就想怎么样才能让手机完全显示PC端的网页呢？
网页的宽度必须和浏览器保持一致
默认显示的缩放比例和PC端保持一致。(不然看不清或者失真)
不允许用户自行缩放网页。
针对以上提出的方案，我们可以在移动端设置一个meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
介绍一下里面的属性
- width控制 layout viewport的宽度, "device-width"为当前设备的宽度。
- initial-scale: 页面初始缩放的比例。
- user-scalable: 是否允许用户缩放。
- maximum-scale：允许用户缩放到的最大比例。
- minimum-scale：允许用户缩放到的最小比例。
当设置完meta标签后，也满足了我们提出的解决方案，那么现在我们手机浏览网页的显示和PC端一样了。
注意点
如果在移动端使用百分比布局的话，那么最好将box-sizing设置为border-box(最好去看一下css中的盒模型)，否则盒子的宽度不好计算。
盒子：
border: 1px solid #ccc;
width: 100%;
因为默认是标准盒子，所以计算盒子实际宽度是: 100%+padding+border, 无法准确的计算盒子宽度。
在使用精灵图的时候，需要把图片缩小为原来的两倍才能完美显示,不失真(以iPhone 6为基准)。
使用float的时候要记住清除浮动，这要才能保证父元素的高度不会塌陷
.clearFix::after, */\*清除浮动\*/*
.clearFix::before{
content: "";
display: block;
visibility: hidden;
height: 0;
line-height: 0;
clear: both;
}
