最好的閱讀是輸出。 –玉伯
即將開始涉入移動Web了，有點小興奮也有點小緊張，希望能在未來的團隊里帶來一些價值。記錄一下我現在所認識的移動Web。
原文摘自我的前端博客，歡迎大家來訪問
原文地址：http://www.hacke2.cn/hello-mobile-aop/
一些基本名詞
初涉移動Web，會有一些基本的名稱需要掌握，什么設備像素比呀，移動端Web的內核呀，viewport呀，屏幕的的最小物理單位呀。我已經記錄了一些，以后還得繼續補充。
關於布局
我們來看看移動端最常見的布局：
上中下三部分布局
下面實現上述頁面常見移動Web布局三種方法：
- fixed
- absolute
- flexbox
fixed
對於第一種布局，其實現原理就是header和footer部分都為fixed定位。內容頁面可以使用-webkit-overflow-scrolling:touch來進行滾動，當然，對於不支持的，也可以使用iscroll來兼容。 fixed布局網上人說坑太多，滾動的時候bug太多，特別是表單元素時彈出輸入法會有很多問題，所以不建議使用，以下是一些網上參考的資料：
- - 移動Web開發實踐——解決position:fixed自適應BUG
- - 移動端web頁面使用position:fixed問題總結
- - 移動Web開發，4行代碼檢測瀏覽器是否支持position:fixed
absolute
和fixed一樣，只不過將fixed定位設為絕對定位。設定其left,right等值。下面有一個絕對定位的DEMO。
flexbox
flexbox布局我估計是仿照flex*布局方式。由於主流移動端都使用的現代瀏覽器都支持這個CSS3屬性。Flexbox布局俗稱伸縮布局，它可以簡單快速的創建一個具有彈性功能的布局。由於移動多終端的需求，所以首選是flexbox。
圖片與文字
非背景圖片
之前提到的常見移動Web名詞，設備像素比：2的高清視網膜技術卻會使圖片變得模糊，這是為什么呢？
中密度與超高密度(retina)顯示的區別
根據計算公式，一個像素點會被拆分成4個小點，顯示起來自然模糊了。
解決方案一般有兩個：
1.設置target-densitydpi=device-dpi，采用按照真實比例來展示，然后進行媒體查詢技術如下面代碼：
#header { background:url (medium-density-image.png); } @media screen and (- webkit -device-pixel-ratio:1.5) { /* CSS for high-density screens */ #header { background:url (high-density-image.png);} } @media screen and (- webkit -device-pixel-ratio:0.75) { /* CSS for low-density screens */ #header { background:url (low-density-image.png);} }
這樣有一個弊端就是：需要為每一種分辨率書寫單獨的代碼。
- 假如需要100×100的圖片，那么從設計稿(寬為640)上截取200×200的大小，但設置還是100*100。寬720的設計稿 ，為了滿足顯示像素為360的屏幕。這樣就可以來只有一份設計稿只寫一份代碼了。
另外，多張圖片的顯示可以進行canvas的繪制，進行GPU渲染。。
背景圖片
background-size設置為高度，自適應寬度100%，這也是CSS3的屬性。
文字
px單位
傳統PC端常用的px來設置大小。因為他比較穩定和精確。
em單位
瀏覽器中放大或縮放瀏覽頁面時會存在一個問題，因為字體大小是固定了的。要解決這個問題，我們可以使用“em”單位。 em有如下特點：
- em的值並不是固定的;
- em會繼承父級元素的字體大小。
rem單位
rem是CSS3的屬性，和em一樣，他的值是不固定的。區別在於他參考的是一個根元素的確定值。em是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小，在我們多次使用時，就會帶來無法預知的錯誤風險。而rem是相對於根元素html，這樣就意味着，我們只需要在根元素確定一個參考值。
在了解了px,em,rem的區別后，我們可以進行如下設置：
html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; }
我們在寫大小的時候通過一些簡單的計算就可以了，比如的拿到的設計稿有一一部分為18px的文字，那我們在寫代碼的時候就可以寫：
p : {font-size:18px；font-size:1.8rem}/*(1.8 x 10=18)*/
動畫
在移動端不用過多考慮平台端的兼容性，完成動畫也是借助CSS3的動畫來實現。
在我看來，移動端動畫優先選擇為以下順序：
transition > Animation > js
而且最好使用translate3d強制設備進行GPU渲染，但也不能過度使用。 我們可以使用CSS3動畫庫animate.css玩完成常見的動畫。更多關於CSS3動畫的可以參考：
- - CSS動畫簡介
一些事件
移動端原生的最重要的事件touch ：
- touchstart
- touchmove
- touchend
- touchcancel
其中，他們之間觸發的先后順序為：
touchstart > touchmove > touchend > click
移動端click會延遲300ms，原因是他在等待判斷是不是雙擊。當然，現在的一些框架解決了這個問題：
用這幾個事件可以衍生出很多事件，比如左滑右滑，上下滑屏，放大，縮放等。詳情可以看指尖上的JS系列。
現在已經有一些封裝了的框架：
當然還有其他移動端專屬的事件，比如：
- 觸摸事件
- 屏幕旋轉事件
我用原生JS模仿了神馬搜索搜出美團后的信息輪播：
- - 移動端訪問
一些框架
移動端有一些較為成熟框架：
- - JQuery Mobile
- - JQTouch
一些公司也有自己的框架
但更多公司選擇使用一些基礎的類庫自己封裝一些常見的交互，畢竟在移動端上流量真的是寸土必爭。比如神馬搜索用的是zepto.js。通過gzip壓縮后只有幾k，而且風格與JQ一模一樣，無學習成本。
當然還有些為工具框架
- - iscroll4