流式布局: 根據百分比布局，頁面內容根據瀏覽器的寬度，內容向兩邊擴展。就像在食堂打飯，一個打完接著一個跟上
響應式布局: 響應式布局主要是通過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/
