移動web基礎

接觸retina屏

基礎知識（移動Web的基礎知識）
排版
佈局（高效的移動Web佈局）
開發效率
終端交互優化

pixel像素基礎
viewport視圖
viewport_meta標籤
viewport_coding

pt, px
Viewport
640*960
initial-scale=1.0
devicePixelRadio
ppi=√(1136*1136 + 640*640)/4=326ppi

示例：
640*1136的圖片能不能在iphone5上徹底顯示？
iphone5的分辨率 640*1136
iphone5的分辨率是320*568

移動端不能用固定佈局，由於要適應設備。
高效佈局方案： Flex彈性盒子佈局
根據元素的不一樣，自動填充容器

響應式設計
1. 百分比佈局
2. 彈性圖片（圖片外面有容器）
img {
max-width: 100%
}
3. 從新佈局，顯示與隱藏

很差：性能很差，不一樣設備都要下載一大套css代碼
好處：減小重複開發

相對單位
em： 是根據父節點的font-size爲相對單位【不推薦】
rem：是根據html的font-size爲相對單位【推薦】

em 在多層嵌套下，變得很是難以維護
rem 能統一全局

終端交互優化
對click事件say no
tap事件基礎
touch觸摸事件
下拉加載

使用zepto.js框架的touchstart和touchend模擬tap事件【zepto框架我的強烈不推薦！bug太多！你本身要去處理框架的bug還有你本身的bug，很O疼！】
（參考jquerymobile）

Touch基礎事件
觸摸纔是移動設備的交互的核心事件
touchstart
touchmove
touchend

移動端彈性滾動【優化用戶體驗】
body {
　　overflow:scroll;
　　-webkit-overflow-scrolling: touch;
}

Android不支持原生的彈性滾動，
但能夠藉助第三方庫iScroll來實現

也能夠本身模擬下拉刷新的動畫，原理：向下滑動到必定的程度，顯示動畫並刷新加載頁面。