流式布局: 根据百分比布局，页面内容根据浏览器的宽度，内容向两边扩展。就像在食堂打饭，一个打完接着一个跟上
响应式布局: 响应式布局主要是通过css3的媒体查询进行操作，检查用户使用的设备，进行不同的页面渲染
适配问题：
由于pc端和移动端视区不同，pc端网页使用移动设配打开，会进行自动缩放，需要进行设配viewport设置.
适配移动端要求：
1.页面的宽度需要和浏览器相一致
2.默认显示的缩放比例和pc端一样（缩放比1.0）
3.不允许用户进行缩放比操作
适配设置:
如果适配设置没有，那么viewport就会按默认设置执行
viewport功能：
1.设置视区的宽度 width
2.设置视区的高度 height
3.设置缩放比例 initial-scale
5.设置用户是否可以缩放页面 user-scalbale = yes/no 1/0
6.设置最大缩放 maxinum-scale
7.设置最小缩放 mininun-scale
代码:<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">达到适配要求
像素比：
物理像素:是屏幕的可视颗粒的大小 px(页面的尺寸单位)
结论:1px中能装几个像素，就是像素比,在同样的一张图片在更高清的屏幕上显示，会变得模糊（失真）
移动端主流的浏览器：
现在移动端的主流浏览器的内核基本上都是 webkit 或者 blink 兼容-webkit
移动端常用适应样式：
box-sizing:border-box 由于移动端是非固定像素，所以在计算内容高度、宽度等数据时要从边框开始，防止溢出
-webkit-tap-highlight-color: 设置移动端高亮样式
-webkit-appearance: none 清除移动端所有的自带样式
图片下间隙:由于文字和图片的对其方式为，以下基线为准，有些字母的下基线比较特殊，比如g对准是忽略了小尾巴，使px增加，所有图片在对准时就会多出一些位置.总结：图片下面的空隙是由于图片默认基线对齐造成的。
移动端事件(touchEvent)
1.touchstart 当手指触摸屏幕的时候触发
2.touchmove 当手指在屏幕上滑动时触发
3.touchend 当手指离开屏幕是触发
4.touchcancel 当被迫停止滑动时触发(比如打游戏时突然来个电话)
touchList:触摸点(和屏幕触摸的所有点的集合)
changedTouches 改变后的触摸点集合
targetTouches 当前元素的所有触摸点集合
touches 屏幕上的所有触摸点集合
集合中的常用属性:
clientX clientY：基于浏览器窗口(视口)
pageX pageY: 基于页面(视口)
screenX screenY：基于屏幕
zepot.js:移动端库
bfc：一个独立的渲染区域，这个区域将和外围元素互不相干，不会相互影响。一个bfc中的块盒和行盒都会垂直沿着父容器的边框排列
详细解释引用:https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
