首先做開發碼子編完了我們得有個工具去看效果，PC端開發我們有firefox,chrome等等，那么我們做手機web用什么做調試？手機設備多種多樣，不同品牌，不同的屏幕尺寸。當然我們不可能把所有的手機設備都買齊了，然后在開發的時候，在桌子上從左到右依次擺放，在寫了一段代碼之后，從左到右依次刷新，呵呵。如果真有人這么去做，我也不說啥了，我只求跪求土豪咱做朋友吧~嘿嘿。
廢話說了一推，說回重點：首先，移動web開發咱需要一個調試工具。
1.Google emulation：谷歌的移動端模擬器，簡單的理解為pc模擬手機的屏幕大小和瀏覽器特性的一個東東。
打開方式：打開chrome瀏覽器，然后F12鍵打開，開發者工具，點擊小手機的圖標，如下圖
打開的效果和各部分的功能作用：
首先我們在device里可以選擇需要模擬的設備，這個很重要，決定我們寫的頁面可以適配什么樣的手機
打開device下拉菜單看到可以模擬的設備：可以看到主流的手機這里基本都有了O(∩_∩)O
有了emulation我們可以很方便的做開發了。
2.veiwport: 什么是veiwport?
官方解釋：手機瀏覽器是把頁面放在一個虛擬的“窗口”（viewport）中，通常這個虛擬的“窗口”（viewport）比屏幕寬，這樣就不用把每個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），用戶可以通過平移和縮放來看網頁的不同部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其他手機瀏覽器也基本支持。
簡單的理解為，移動終端的可視區。
關於veiwport的有關設置：
常見的例子：<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0 />
上邊例子的中文解釋 寬度等於輸出設備的寬度，高度等於輸出設備的高度 用戶不准許縮放 初始放大比例為1.0（也就是1:1大小），最小縮放1.0，最大放大1.0，總之一句話就是不讓用戶做縮放的操作。
width [pixel_value | device-width] width 直接去設置具體數值大部分的安卓手機不支持的 但是IOS支持
user-scalable 是否允許縮放 （no||yes）
initial-scale 初始比例
minimum-scale 允許縮放的最小比例
maximum-scale 允許縮放的最大比例
target-densitydpi
-- dpi_value 70–400 //每英寸像素點的個數
-- device-dpi 設備默認像素密度
-- high-dpi 高像素密度
-- medium-dpi 中等像素密度
-- low-dpi 低像素密度
-- webkit內核已不准備再支持
3媒體查詢:Media Queries
關於媒體查詢的用法詳情請參考：http://www.w3cplus.com/content/css3-media-queries
主要作用就是適配不同設備的大小。
例如：
@media all and (min-width: 400px)
媒體類型所有媒體，屏幕寬度400px以上執行某某樣式
@media all and (max-width: 399px)
媒體類型所有媒體，屏幕寬度399px以下上執行某某樣式
@media screen and (min-width:600px) and (max-width:900px)
媒體類型屏幕 ，當屏幕尺寸大於600小於900px時執行的某某樣式
實際工作中引用link標簽時候使用：
<link rel="stylesheet" media="all and (max-width:600px)" href="small.css" type="text/css" /> <link rel="stylesheet" media="all and (min-width:900px)" href="big.css" type="text/css" /> <link rel="stylesheet" media="all and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />