首先，我們要了解一下測試工具。這里提供兩種測試工具，一種是 Chrome 自帶的移動端測試工具，另一種是 Opera Mobile 移動端測試工具。這里主要以 Chrome 為準，他模擬了主流的手機，并且引擎是webkit。
首先，我們介紹一下分辨率，通過 Chrome 移動端測試工具可以得知，一般分辨率最小的不會小于 320了，最大的不超過 640。這時有人會疑問，我的手機分辨率是一千多呢，為什么設計的時候還是 640像素？比如 iphone6 plus 的分辨率為：1080x1920(有一些設計者稱實際分辨率：1242 x 2208)，而它的邏輯分辨率為：414x736。沒有超過 640，通過頁面縮放技術進行縮小而不會失真。而如果是 ipad，分辨率為：1563x2048，而它的邏輯分辨率則為 768x1024，所以，如果設置 640 的頁面，會在豎屏出現白邊。
其次，我們看下典型的兩種設計，一種是全屏流體設計，另一種是固屏流體設計。下面有幾個代表網站：
全屏類： 1.騰訊新聞：http://xw.QQ.com/ 2.途牛旅游：http://m.tuniu.com/
固屏類： 1.京東商城：http://m.jd.com/ 2.淘寶網：http://m.taobao.com/
如果只是兼容移動手機端，那么不管是固屏還是全屏都是一樣。從設計難度上來說，固屏貌似更容易一點點，因為全屏設計，在電腦上設計，完全放大又失真，設計起來比較難受。我們這里推薦使用固屏。當然，全屏設計，在PC 端和 PAD 平板也可以無縫瀏覽，但圖片卻會失真。固屏雖然會留有白邊，但圖片不會失真。再當然，用了 PAD 或 PC 端，為什么卻訪問用手機網頁呢？除了設計師，還有誰會去這么做？所以，沒必要。
做移動站有一個必要的知識，就是關于屏幕寬度以及縮放問題。我們習慣性的在<head>標簽之間增加一個<meta>標簽：
//窗口設定 name=”viewport”
//頁面大小屏幕等寬 width=device-width
//初始縮放比例，1.0表示原始比例大小 initial-scale=1.0
//允許縮放的最小比例 minimum-scale=1.0
//允許縮放的最大比例 maximum-scale=1.0
//用戶是否可以縮放，這里 no 表示不可以 user-scalable=no
上面最大最小比例其實就已經限制了無法縮放了，和最后一個是否可以縮放有同樣的功能。
因為不同的手機，分辨率都不同，圖片一定要能夠自適應等比例縮放，才能保證布局的正確性。
//設置 max-width 后，圖片開始自適應
img { display: block; max-width: 100%;}新聞熱點
疑難解答
